CSS 边距问题

Question

我的 css 有问题，如果我使用 margin: 0 而不是 margin-top: 0，对于 header p， header { margin: 0 0 20px; 会和没有一样好。应该是这样吗？如果我看到 firebug 中发生了什么，那是因为 header 的 margin-bottom collapsed 到下一个兄弟，section。

html

<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; } 

Answer 1

默认情况下，Firebug 只向您展示故事的一部分。

要查看将 margin-top: 0; 更改为 margin: 0 0 0 0; 时真正发生的情况，请单击“样式”选项卡右侧的箭头(在您的快照上的“header p”上方)并选择“显示默认 CSS 属性”或类似的东西，您会向下看到 html.css 已经将 p 样式设置为:

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

注意，不要修改系统样式，否则您将不得不重新启动 Firefox，重新打开标签页是不够的。

顺便说一句，这个 1em 边距是您在没有任何样式的 HTML 中看到的(菜单显示/页面样式/Firefox 中的无样式或 Web 开发人员工具栏的 CSS 菜单):你的段落有一些垂直边距。

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