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

这是由于margin collapsing

块的顶部和底部边距有时会合并（折叠）为单个边距，其大小是合并到其中的边距中的最大边距，这种行为称为边距折叠。

您还可以在w3c site上找到更多信息。

当且仅当 [...]没有线框，没有间隙，没有填充且没有边框将它们分开时，两个边距相邻 <...> < / p>

因此，如果您应用padding-top（1px就足够了），就像在第二个示例中一样，边距不再折叠。如前所述，一个简单的解决方案是删除标题元素的默认边距。

Answer 2

这与应用于Heading1元素的默认CSS有关。它已经应用了填充/边距。

如果您重置它，则可以看到您所追求的结果：http://jsfiddle.net/68LgP/8/。

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

Answer 3

请参阅更新的CSS here

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

h1
{
    padding: 0px;
    margin: 0px;
}

Answer 4

将h1页边距设为0

h1 {
    margin: 0;
}

Answer 5

现在将h1的边距保持在DIV内。 h1的默认上下边距约为21px，所以当你向DIV添加1px填充时，它现在看起来像22px

Answer 6

<div>是一个块元素，这意味着它以换行符开始和结束。我相信这会导致你的问题 - 你可能想换成<span>标签，虽然我不确定这是否能解决这个问题。

Answer 7

您可以使用CSS Reset重置所有CSS设置，包括此类问题。推荐用于任何网站。
CSS重置文件如何解决您的问题？正如您所看到的，在第一段中，包含了h1，并且给出了margin:0，这是减少像您这样的问题的差异所必需的。

小填充，差异很大

7 个答案: