【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (11) 04-01 横幅や高さの指定で上下マージンの処理が変わる問題[未修正] | クリエイティブ | マイコミジャーナル

CSSの標準規格での子要素と親要素の上下マージンの扱い CSSの標準規格では、親要素に罫線またはパディングが指定されている場合、子要素と親要素の上下マージンは相殺されないことになっている。たとえば、サンプルソース4-1-0では、<div>の中に<p>でマークアップした文章を記述した。これを2つ記述し、<div>に赤い罫線とピンクの背景色、<p>にオレンジの罫線と黄色い背景色を指定している。IEやFirefoxなどのブラウザでは、デフォルトスタイルシートで<div>には0、<p>には約1.33emの上下マージンが挿入されるため、<div>と<p>の上下マージンの相殺を考えなければならない。しかし、サンプルソース4-1-0のように、親要素<div>に罫線を指定している場合、標準規格に従うと相殺は生じないことになる。 これをIEとFirefoxで表示すると、図4-1-0a〜4-1-0cのようにな