小填充,差异很大

Question

如果我只在一个标题周围的div中添加1px填充,那么这显然是一个巨大的差异(http://jsfiddle.net/68LgP/).

HTML:

<div class="pad0">
    <h1>Text</h1>
</div>
<div class="pad1">
    <h1>Text</h1>
</div>

CSS:

.pad0 {
    background-color: #E9E9E9;
    padding: 0px;
}
.pad1 {
    background-color: #E9E9E9;
    padding: 1px;
}

为什么会这样？我真的希望获得与1px填充相似的效果,但没有添加额外的填充.

Answer 1

这是由于保证金崩溃

块的顶部和底部边距有时会合并(折叠)为单个边距,其大小是合并到其中的边距中的最大边距,这种行为称为边距折叠.

您还可以在w3c网站上找到更多信息.

当且仅当没有线框,没有间隙,没有填充且没有边界将它们分开时,两个边距相邻[...]

因此,如果您应用padding-top(1px足够),如第二个示例中所示,边距不再折叠.如前所述,一个简单的解决方案是删除标题元素的默认边距.