CSS保证金问题

前端之家收集整理的这篇文章主要介绍了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}并保留标头本身中指定的空白.删除此语句将还原为您看到的行为.

猜你在找的CSS相关文章