html - 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. 空块

Answer 2

试试这个 CSS：

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

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

更改margin-bottom为padding-bottom。

jsFiddle