タグメモのカケラ

すごい初歩的なところで引っかかってしまったのでメモ。

元々、上下に隣接するボックスにそれぞれmarginの上下を指定すると相殺されるのは知っていたので、そうしないように組んでいるのですが、今回はそれでも相殺されてしまったので、うんうん唸ってしまいました。

外枠の背景色はエンジ

#contents_style {
width: 748px;
padding: 6px;
margin: 10px;
background-color: #990000;
}

それに対して、中のボックスは白

#contents_style div.step_area {
padding: 0px 10px 20px;
width: 564px;
background-color: #FFFFFF;
}

一番下にページトップ指定

#contents_style p.page_top {
margin-top: 10px;
}

これは普通にOK
白いボックスの中にページトップの画像を入れてもdiv.step_area内にpaddingを指定しているので、ページトップ指定の下に20pxの余白ができます。
同じサイト内で同じレイアウトだけど、白背景のボックスの余白指定が少しだけ違うために使いまわしができずに、上記と同じ事を、別のclassを作ってやってみたところ、マージン相殺に引っかかりました。

全体の指定は一緒。

それに対して、中のボックスは白

#contents_style div.area_box {
padding: 10px 10px 0px;
width: 564px;
background-color: #FFFFFF;
}

一番下にページトップ指定

#contents_style p.page_top {
margin-top: 10px;
margin-bottom: 20px;
}

同じことだと思うのですよ。
白い背景ボックスにpadding-bottom20px;でも、一番下に配置するページトップにmargin-bottom:20px;でも。
しかし…相殺が起こりました。
当然、上下指定が被るような事はしていません。

うがー、何故だぁーってなったんですね。

で、色々調べて分からず、ちょろっと仲間内に聞いてみたら…
このパターンもマージン相殺という事が発覚。
CSS2の仕様らしいっす。

ボックスを指定するときは、marginとpaddingの両方を指定する。
それは知ってたのですが、このマージン相殺、常に発生するわけではなく、それなりの条件をクリアすると発生するらしいです。

で、対応策としましては

margin指定ならpaddingに、padding指定ならmarginに、
相殺される箇所に1px指定してあげる。

普通に、難なくこれで直りました…。

上記ソースではどう直したかというと

それに対して、中のボックスは白

#contents_style div.area_box {
padding: 10px 10px 1px;
width: 564px;
background-color: #FFFFFF;
}

一番下にページトップ指定

#contents_style p.page_top {
margin-top: 10px;
}

これでOKです。
本当にパターンを知らないだけで初歩的なところに引っかかったな～と反省。

参考サイト　：　CSS2の仕様邦訳　マージンの相殺