小填充，大不同答案

【问题标题】：Small padding, big difference小填充，大不同
【发布时间】：2014-04-29 01:05:30
【问题描述】：

如果我只在标题周围的 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 填充类似的效果，但不添加额外的填充。

【问题讨论】：

标签： html css

【解决方案1】：

这是由于margin collapsing

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

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

两个边距相邻当且仅当 [...] 没有行框、没有间隙、没有填充 并且没有边框将它们分开[...]

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

【讨论】：

感谢您回答原因，而不仅仅是解决他的预期结果。
您也可以通过将divs 显示为inline-block; 并将它们的宽度设置为100% 来修复。这消除了margin-collapse。
附带说明，您可以在第一个容器 div 中使用溢出：隐藏（或自动）来做相反的事情，即阻止边距折叠
好的，我明白解释了。但我有点困惑，为什么这里有这么多人建议使用margin: 0 作为解决方案。然后第二个看起来就像第一个，但我希望它是相反的。我想解决方案是删除margin 和将padding 添加到标题的前一个边距的大小。唯一的问题是我想使用浏览器的默认边距规范，而在使用 padding 时我无法做到这一点。
为什么这里有这么多人建议一个边距：0：因为如果你从标题中删除一个边距，你就不能有两个边距折叠

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

如果你重置它，你可以看到你想要的结果：http://jsfiddle.net/68LgP/8/。

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

【讨论】：

【解决方案5】：

请查看更新后的 CSS here

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

将h1 边距设置为0

h1 {
    margin: 0;
}

【讨论】：