h1,h2,h3 ..元素占据div边缘

时间:2013-06-19 09:03:36

标签: html css margin padding

为什么在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元素底部边距被spicified,但h bottom margin被忽略。

2 个答案:

答案 0 :(得分:3)

为两个兄弟分配边距会导致边距在边距相邻的地方崩溃。

MDN document详细解释了这种情况。

  

块的顶部和底部边距有时会合并(折叠)   单个保证金,其大小是合并的最大边际   进入它,一种称为边缘崩溃的行为。

保证金崩溃发生在三个基本情况中:

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

答案 1 :(得分:0)

试试这个CSS:

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

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

margin-bottom更改为padding-bottom

jsFiddle