CSS边距问题

Question

我有一个CSS问题，如果我在header p中使用margin: 0而不是margin-top: 0，那么header { margin: 0 0 20px; }就会好像不存在一样。这是正常的吗？如果我在Firebug中查看发生了什么，是因为header的margin-bottom被合并到下一个兄弟元素section中了。

<header>
    <h1>ToDo List</h1>
    <p>HTML5 Offline Capable Web Application</p>
</header>

css

header { font: 24px/1em Notethis; color: #666; margin: 0 0 20px; }
header h1 { font: 60px/1.4em Hetilica; margin: 0; }
header p { margin-top: 0; } 

- Jiew Meng

---

非常好的问题。太棒了！ - GlenCrawford

出于好奇，为什么这个问题被认为是“离题”的？（我之所以问是因为我很好奇关闭投票的原因）。诚然，这不是关于编程而是关于 CSS 的问题，但在这方面并不是独特的，并且社区似乎普遍接受，从 Stack Overflow 上有很多关于 CSS 的问题可以看出。 - David Thomas

Answer 1

默认情况下，Firebug只显示了故事的一部分。

如果你想要看到当你改变margin-top: 0;为margin: 0 0 0 0;时真正发生了什么，请点击样式选项卡右侧的箭头（在你的快照中'header p'上方），然后选择“显示默认CSS属性”或类似的选项，你会看到html.css已经将p样式设置为：

p {
    display: block;
    margin: 1em 0;
}

注意，不要修改系统样式，否则你将不得不重新启动Firefox，重新打开选项卡是不够的。

顺便说一下，在HTML中没有任何样式的情况下（在Firefox中的菜单显示/页面样式/无样式或Web Developer工具栏的CSS菜单中），这个1em的边距就是你看到的：你的段落有一些垂直边距。

所以基本上你删除了一个1em的底部边距。

- FelipeAls

---

哦，谢谢！但问题是为什么 header { margin: 0 0 20px; } 没有起作用呢？噢，@matt 回答了这个问题..."许多浏览器不会自动将 header 标签视为块级元素，除非明确定义。" - Jiew Meng

Answer 2

我认为这里的问题在于您的header元素实际上没有呈现任何应用于它的margin。您看到的空间实际上是应用于header p的默认margin的结果。

我之所以这样说，是因为许多浏览器不会自动将header标签视为块级元素，除非明确定义为此：

header { display: block; }

在你的CSS中将这个语句应用到header后，我成功地应用了header p { margin: 0 }并保留了header本身指定的边距。如果删除此语句，将会恢复到你所看到的行为。

- Matt Weldon