お知らせ / ブログ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をかけない等の決まりを作っておけば安心です。

ページトップに戻る