h1，h2，h3 ..元素吃div div边缘

为什么h1，h2，h3元素边距在div中被忽略？h1，h2，h3 ..元素吃div div边缘

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

来源

2013-06-19 Lambrusco

这是正确的行为，你要的是给你的'col'类'填充底：1EM;' – Brewal

我不知道什么是你试图做...但也许你正在尝试做一个填充：检查'padding-bottom：1em;'而不是。 – maqjav

您尝试忽略底部边距设置边距：-18px;在.col css –

为两个兄弟姐妹分配边距会导致边距在相邻边缘处折叠。

这MDN document详细解释了情况。

顶部和块的底部边缘有时合并（折叠）成一个单一的余量，其尺寸是最大的边缘的组合进去，称为余量折叠行为。

保证金塌陷发生在三个基本情况：

相邻的兄弟姐妹
家长和第一/最后一个子
空块

来源

2013-06-19 09:05:58

谢谢，这就是我真正想知道的 – Lambrusco

试试这个CSS：

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

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

更改margin-bottom至padding-bottom。

jsFiddle

来源

2013-06-19 09:06:37

h1，h2，h3 ..元素吃div div边缘

回答

相关问题