Html 小填充，大差异

如果我只在标题周围的div中添加1px填充，那么这显然会产生巨大的差异（）

html:

---

为什么会这样？我真的很想实现与1px填充类似的效果，但不添加额外填充。

将

h1

边距设置为

0

h1 {
    margin: 0;
}

这是由于

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

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

两个边距是相邻的当且仅当[…]没有行框，没有间隙，没有填充和没有边框分隔它们[…]

---

因此，如果像在第二个示例中一样，在顶部应用

填充（
1px
）就足够了，那么边距将不再折叠。如前所述，一个简单的解决方案是删除标题元素的默认边距，改为应用填充。
它现在将h1的边距保持在DIV内。h1的默认上下边距约为21px，因此当您向DIV添加1px填充时，它现在看起来像22px
请查看更新的CSS

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

如果重置它，您可以看到您要查找的结果：

是块元素，这意味着它以换行符开始和结束。我认为这是造成您的问题的原因-您可能希望切换到
标记，尽管我不确定这是否能解决问题。
您可以使用它重置所有CSS设置，包括此类问题。推荐用于任何站点。

CSS重置文件如何解决您的问题？正如您所看到的，在第一段中，h1被包括在内，并且给出了
margin:0
，这是减少像您这样的问题的差异所必需的。
感谢您回答为什么，而不仅仅是解决他的预期结果。您还可以通过将
div
s显示为
内联块来修复
并将其宽度设置为
100%
。这就删除了边距折叠。作为旁注，您可以在第一个容器div中使用overflow:hidden（或auto）来执行oposite，也就是说，阻止边距折叠。Kay，我理解了解释。但我有点困惑，为什么这里这么多人建议使用
边距：0
作为解决方案。然后第二个看起来就像第一个，但我希望它是另一种方式。我想解决办法是删除
页边距
，并在标题中添加
填充
上一页边距的大小。唯一的问题是，我想在浏览器中使用默认的边距规格，而在使用
填充时，我无法做到这一点。为什么这里有这么多人建议使用边距：0：因为如果从标题中删除边距，就不能使两个边距折叠
.pad0 {
    background-color: #E9E9E9;
    padding: 0px;
}
.pad1 {
    background-color: #E9E9E9;
    padding: 1px;
}

h1 {
    margin: 0;
}

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

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

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