h1，h2，h3 ..元素占用div边距 [英] h1, h2, h3.. elements eats div margins

问题描述

为什么在div中忽略h1，h2，h3元素的边距?

Why h1, h2, h3 elements margins are ignored when in div?

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底边距将被忽略.

When I put h element into div and there is no other text in it, though h element and div element bottom margins are spicified, h bottom margin is ignored.

推荐答案

为两个兄弟姐妹分配边距将导致边距相邻处的边距崩溃.

Assigning margins to two siblings will cause the margins to collapse where the margins are adjacent.

此 MDN文档详细说明了这种情况.

This MDN document explains the situation in detail.

有时将块的顶部和底部边距合并(合拢) 成为一个单一的边距，其大小是合并的边距中最大的一个 它被称为边缘崩溃的行为.

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

保证金崩溃发生在三种基本情况下:

1. 相邻的兄弟姐妹
2. 父母和第一个/最后一个孩子
3. 空块

这篇关于h1，h2，h3 ..元素占用div边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！