昨日に続きCSSについて書いてみたいと思います。下記のようなコードがあるとします。
<div class=”container”>
<div class=”item”>Item 1</div>
<div class=”item”>Item 2</div>
<div class=”item”>Item 3</div>
<div class=”item”>Item 4</div>
</div>
通常、itemクラス同士の上下のスペースは統一されています。例えば 40pxとします。一番上のitemと上の別の要素とのmarginは60px,一番下のitemと下の別の要素とのmarginも60px。下記のようなイメージの場合、どのようにコーディングしたらいいでしょうか？
今更というところもありますが、恥ずかしながら、私は毎回その時の状況（気分？）で、適当にmarginをつけていました。これが後に苦労する原因にもなっていました。もちろん、毎回状況は違って臨機応変に対応する必要はありますが、基本的には下記のようにmargin-bottomで調整した方がいいです。
.container .item {
margin-bottom: 40px; /* 各itemの下のマージン */ }
.container .item:first-child {
margin-top: 60px; /* 最初のitemの上のマージン */ }
.container .item:last-child {
margin-bottom: 60px; /* 最後のitemの下のマージン */ }
一般的には、要素にmargin-bottomを設定することで、後続の要素との間隔を管理する方が柔軟です。これは、要素が追加されたときに、新しい要素が自動的に前の要素から適切な間隔を持つようにするためです。一番良くないのが、margin-topとmargin-bottomとの規則性がなく、混在させてしまうことです。