これがバグなのか、それとも難解な CSS ルールがここで働いているのかはわかりません。基本的に、子要素のマージン設定は、親が子を収容するのに十分な大きさであり、マージンが完全にある場合でも、親の外側で有効になります。
これを示す小さな HTML ドキュメントを次に示します: https://gist.github.com/skid/5048988。これは Chrome 25 で発生しますが、Firefox 14 では発生しません。
これがバグなのか、それとも難解な CSS ルールがここで働いているのかはわかりません。基本的に、子要素のマージン設定は、親が子を収容するのに十分な大きさであり、マージンが完全にある場合でも、親の外側で有効になります。
これを示す小さな HTML ドキュメントを次に示します: https://gist.github.com/skid/5048988。これは Chrome 25 で発生しますが、Firefox 14 では発生しません。
@Yosyhiのコメントから:ブロックの上部と下部のマージンが1つのマージンに結合(折りたたまれ)されることがあります。このマージンのサイズは、結合されたマージンの中で最大のものです。これは、マージンの折りたたみと呼ばれる動作です。
マージンの崩壊は、次の3つの基本的なケースで発生します。