CSSレイアウトの隙間をコントロール!
上下マージンが思ったように空かない マージン相殺 CSSにはマージンの相殺という概念があります。
マージンの相殺とは、
『隣り合っているか親子関係にあるボックスはパディングもボーダーも間に挟んでい無い場合、上下マージンが結合される』
というものです。
しかし以下の場合はマージンは相殺されません。
- フロートしているボックスとのマージン
- ポジショニングしているボックス
- 左右のマージン
このためマージン相殺を理解していないと､ 『思ったレイアウトが出来ない!』ということになってしまいます。
マージン相殺をさせないためにはいくつかの簡単な方法があります。
- 関係するボックスにボーダーかパディングを設定する。
- 関係するボックスをフロートする。
実際には例えば、
親ボックスに padding-top;1px: や float:left; など邪魔にならない設定をしてみましょう。
