« 初出勤終了 | Back To Blog Top | の使いどころ »
縦方向に重なるmarginの解釈
主に自分の為のメモ。
CSSのmarginでわかりにくいのが、縦方向の解釈。 上下に隣接するBOX同士でどう処理されるか、という部分ではないでしょうか。
CSSでサイトをコーディングしていると、あれっと思う事もしばしば。
まずは単純に上下に並べられたBOXの場合。 サンプル
このサンプルでは、上のBOXには1emの縦margin。 下のBOXには2emの縦marginが指定されています。
その結果、上下BOXの間に発生するmarginは、大きい方である2emになります。 1em+2em=3emのような足し算にはなりません。
これはシンプルで分かりやすいですね。
次はちょっとややこしい、親子関係での上下margin。 サンプル2
サンプルのソースを見てもらえれば分かるように、divとpが親子の関係になっています。
指定するスタイルは、p要素に関してはどちらも同じ。 div要素に関しては、borderの有無のみです。
後者は、p要素に1emの縦marginと、div要素に3emの縦marginが存在する事が、見た目からでもはっきりと分かります。 こっちはシンプルですね。
ややこしいのは前者の方。
前者は、div要素が子供であるp要素に埋もれてしまっているように見えます。
BOXモデルの概念として、content（内容）の始まりはpaddingの内辺になるという物があります（paddingが無いならborder）。
このサンプルで言うなら、「p要素が描画されるのはdiv要素のpaddingの内辺から」という感じ。
ところが前者にはpaddingもborderも存在しないので、padding辺より外側が無い状態になっています。
div要素のcontentのサイズとp要素のサイズが同じ、っていう感覚でしょうか？
あとは最初のサンプルと同じように、重なったmarginの大きい方、つまりdiv要素の上下marginが適用されて、3em分のmarginが取られる事になります。
分かりにくいですか？ 分かりにくいですね。 そこで解説図を用意しました。
こんな感じ。
両側の3emがdiv要素のmarginです。 真ん中の小さいのがp要素のmargin。
うーん、この概念は難しい・・・・・・と、自分の解説力の無さを棚に上げて言ってみる。
ま、まあ、自分用に考えをまとめる為に書いたんだし、ヨシとしよう（するのかよ）。