CSSレイアウトの隙間をコントロール!

上下マージンが思ったように空かない マージン相殺 CSSにはマージンの相殺という概念があります。
マージンの相殺とは、

『隣り合っているか親子関係にあるボックスはパディングもボーダーも間に挟んでい無い場合、上下マージンが結合される』

というものです。
しかし以下の場合はマージンは相殺されません。

  1. フロートしているボックスとのマージン
  2. ポジショニングしているボックス
  3. 左右のマージン

このためマージン相殺を理解していないと、 『思ったレイアウトが出来ない!』ということになってしまいます。

マージン相殺をさせないためにはいくつかの簡単な方法があります。

  1. 関係するボックスにボーダーかパディングを設定する。
  2. 関係するボックスをフロートする。

実際には例えば、
親ボックスに padding-top;1px: や float:left; など邪魔にならない設定をしてみましょう。

おすすめ