H1, h2, h3.元素蚕食div边距

Question

为什么在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底边距被忽略。

Answer 1

为两个相邻的页边距赋值会导致相邻页边距塌陷。

这个MDN文档详细解释了这种情况。

块的上下边距有时合并(折叠)变成一个单独的页边距，其大小是所有页边距中最大的在其中加入了一种叫做边距折叠的行为。

页边距塌陷有三种基本情况:

1. 相邻兄弟姐妹
2. 父级和第一/最后一个子
<
3. 空块/gh>

Answer 2

试试这个CSS:

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

将margin-bottom改为padding-bottom

jsFiddle