2

divでh1、h2、h3要素のマージンが無視されるのはなぜですか?

http://jsfiddle.net/TzmdZ/

<div class="col">
    <h3>This is header</h3>
</div>  
<div class="col">
    <h3>This is header</h3>
</div>

.col {
    background: gray;
    margin-bottom: 1em;
}

.col h3 {
    margin-bottom: 1em;
}

h 要素を div に配置し、その中に他のテキストがない場合、h 要素と div 要素の下マージンが特定されますが、h 下マージンは無視されます。

4

2 に答える 2

4

マージンを 2 つの兄弟に割り当てると、マージンが隣接している場所でマージンが崩壊します。

このMDN ドキュメントでは、状況を詳しく説明しています。

ブロックの上部マージンと下部マージンは、1 つのマージンに結合 (縮小) されることがあります。このマージンのサイズは、結合されたマージンの中で最大です。マージンの縮小と呼ばれる動作です。

マージンの崩壊は、次の 3 つの基本的なケースで発生します。

  1. 隣接する兄弟
  2. 親と最初/最後の子
  3. 空のブロック
于 2013-06-19T09:05:58.433 に答える
0

この CSS を試してください:

.col {
    background: gray;
    padding-bottom: 1em;
}

.col h3 {
    padding-bottom: 1em;
}

に変更margin-bottomしpadding-bottomます。

jsフィドル

于 2013-06-19T09:06:37.807 に答える