Question

我有一个标题div，我希望与窗口顶部齐平。当我在div中包含一个段落时，空间会在窗口顶部和div之间打开。关闭空间的唯一方法是设置段落的样式：

div#header p {
  margin: 0;
}

默认情况下，为什么浏览器会为包含段落的div之外的段落创建边距？

Answer 1

这可能是由于崩溃边距造成的。 MDN has a good article on the topic。基本上，顶部和底部边距一起折叠以在元素之间形成单个边距。这允许指定p {margin-top:10px;margin-bottom:10px;}并且段落之间仅有10px个空格（而不是20px）。

请参阅显示折叠边距与非折叠边距的this example。

您可以在CSS2 Box Model specification。

中找到更多信息

Answer 2

如果这是一个太大的问题。

将其添加到您的CSS

*
{
    margin: 0;
    padding: 0;
}

每个浏览器都拥有自己的html标签的默认CSS。例如，在Chrome中，p标记之前和之后的边距为1em，等于您设置的font-size。在Firefox中，margin 0期望从元素的底部开始，再次1em。

有重置＆＃39;样式表，从（几乎所有）元素中删除所有特殊样式（如填充和边距），这样您就可以开始“新鲜”＃39;。 Reset.css是一个受欢迎的选择。

Answer 3

它确实如此，不要太担心它。如果你想（如），你可以输入一些代码来删除保证金。

如果您需要，这里有一些好的重置代码：

/*Remove all the default margin and padding*/
{
    margin: 0;
    padding: 0;
}
html, body /*so it'll work when you specify 100% height on element*/
{
    height: 100%;
}

为什么margin = 0，而不是包含它的div元素？

3 个答案: