CSS保证金问题

我的CSS有一个问题,如果我使用margin：0而不是margin-top：0,则对于标头p,标头{margin：0 0 20px; }会和那里一样好.应该是那样吗？如果我看到萤火虫中发生了什么,那是因为标头的边距底部折叠到了下一个同级部分中.

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

最佳答案

我认为这里的问题是您的header元素实际上根本没有渲染应用于其的任何边距.您看到的空间实际上是应用于页眉p的默认边距的结果.

我说这的原因是,除非明确定义,否则许多浏览器不会将header标记自动视为块级元素：

header { display: block; }

在您的CSS标头中应用此语句之后,我可以成功地应用标头p {margin：0}并保留标头本身中指定的空白.删除此语句将还原为您看到的行为.