1

2つのブロック要素（divなど）の間で正反対のマージン（マージンボトムに続くマージントップ）がマージされるのに、ブロック要素とテーブルの間では、これらのマージンが合計されるのはなぜだろうか。

例： 

<style>
    .a { margin-bottom: 18px; }
    .b { margin-top: 6px; }
</style>

<div class="a">Foo</div>
<div class="b">Bar</div>

...

<table class="a">...</table>
<div class="b">Bar</div>

注意：テーブルの表示プロパティを「ブロック」に変更すると、他のブロック要素のペアと同じように動作し、それらのマージンがマージされます。

何故ですか？

4

3 に答える 3

3

これはボックスモデルの一部であり、マージンの崩壊と呼ばれ、w3 はそれを私が説明できるよりもよく説明しています

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

于 2010-02-02T21:36:45.210 に答える
1

ブロック レベルの要素 (Div など) をマージし、ブロック レベルの要素とインライン要素にまとめます。詳細については、これを参照してください。

于 2010-02-02T21:37:16.697 に答える
-1

これは、テーブルに のデフォルトの表示値blockがなく、代わりに の表示値があるためですtable。設定.a { display: block; }すると、マージンが実際に一緒に折りたたまれていることがわかります (少なくとも Firefox 3.6 では)。

于 2010-02-02T21:36:50.827 に答える