「margin」CSSで隣のブロック要素との間隔を調節する

ボックスモデルでも紹介しましたが、ボックスには「マージン」と呼ばれる要素があります。マージンとは、隣のボックスとの間の余白のことです。つまり、ボーダーの外側の部分ですね。マージンの値を指定することで、自由にレイアウトを決めることが出来ます。

10141017-4

Webデザインにおいて、かなり重要な知識ですから知っておいた方が良いでしょう。使用するプロパティは、「margin-top」「margin-bottom」「margin-left」「margin-right」で、上下左右を指定することが可能です。

記述する値は、「px」や「em」、「%」などですね。基本的には、「padding」と同じ使い方ですから、一緒に覚えておいてください。

【CSS】
p.marg {margin-top: 50px;}


【HTML】
<p>サンプルテキスト</p>
<p class=”marg”>マージンの指定した段落</p>

マージンを指定したことで、下の段落の上マージンが大きくなっていますね。

サンプルテキスト

マージンの指定した段落

 

ブロックレベル要素のセンタリング

また、マージン指定をすることで、ブロックレベル要素を真ん中に配置することができます。「margin-left」と「margin-right」を「auto」の値とすれば、自動的に真ん中に配置されるわけです。ちなみに、片方だけ「auto」にすると、反対側に寄せることができます。

【CSS】
p.marg2 {width: 200px;
background-color: #FFFF00;
margin-left: auto;
margin-right: auto;}

p.marg3 {width: 200px;
background-color: #FFFF00;
margin-left: auto;}


【HTML】
<p class=”marg2″>中央寄せ</p>
<p class=”marg3″>片方を「auto」にすると、反対側に寄る</p>

Webページでセンタリングする機会は多いので、これは覚えておきましょう。

中央寄せ

片方を「auto」にすると、反対側に寄る

 

上下マージンの相殺について

左右のマージンを指定すると、それぞれがその数値で適用されます。しかし、上下のマージンに関しては、重なって表示されます。つまり、上下に2つの要素が並んでいるとして、上の下マージンが10pxで、下の上マージンが20pxだった場合、20pxが適用されるということです。

2つのマージンが重なることで、大きい方が適用されるわけですね。なので、マージンを指定しても表示が変わらないなら、相殺されていないかをチェックしてください。結局は、大きい方が適用されると覚えておけば良いと思います。

 

以上、マージンプロパティの指定方法を紹介しました。マージンとパディングはセットで指定することが多いので、一緒に覚えておいてください。CSSの基本ともいえる知識ですから、必ず押さえておきましょう。

サブコンテンツ

このページの先頭へ