お知らせ / ブログINFO / BLOG
2019.06.28
【CSS】縦方向のmargin(マージン)について
cssでよく使うmargin(マージン)とpadding(パディング)。
その中でも注意が必要な縦方向のmarginについてお話します。
縦方向のmarginの重なりについて
例えば、以下のように.box1
と.box2
の2つのクラスがあたっているdivがあるとします。
<div class="box1">box1の内容が入ります。</div>
<div class="box2">box2の内容が入ります。</div>
この2つのクラスに対し、それぞれmarginを付与します。
.box1 {
margin:0 auto 20px auto;
}
.box2 {
margin:40px auto 0px auto;
}
こうすると、.box1
と.box2
の間には.box1
の下marginの20pxと.box2
の上marginの40pxの合計60pxとなるかと思います。
でも、違うんです!
marginが個別にかかるのではなく、大きい方の値が参照されます。この場合は.box2
の40pxとなります。
こうした隣合ったブロック同士の縦方向のmarginについては注意が必要となります。予め上方向にはmarginをかけない等の決まりを作っておけば安心です。