如何在 HTML5 Boilerplate 中删除标题和容器 div 之间的间隙答案

【问题标题】：How to remove gap between header and container div in HTML5 Boilerplate如何在 HTML5 Boilerplate 中删除标题和容器 div 之间的间隙
【发布时间】：2011-09-18 11:50:49
【问题描述】：

我很想使用 Paul Irish 的 HTML5 样板，但我遇到了一个 css 问题。

我希望页眉与页面顶部齐平，但我不能让容器 div 添加一个我无法摆脱的间隙。

我认为这与页脚的 clearfix 有关。我尝试为页脚和容器 div 尝试不同的填充大小，但无济于事。

这是html代码：

<header>
  <p> header content </p>
</header>

<div id="main" role="main">

</div>
<footer>
  <p> footer content </p>
</footer>

我的自定义 CSS：

#container {
    background-color:orange;
    padding:1px; /* can't be zero */
    margin:0; 
}

footer {
    margin: 1px 0;
}

body {
    width:960px;
    margin:0 auto;
    background:blue;
    padding:0;
}

【问题讨论】：

标签： css html boilerplate html5boilerplate

【解决方案1】：

@techjacker;可能你必须这样写：

 header{display:block}
    p{margin:0;padding:0}

【讨论】：

感谢 Sandeep，pc ss 成功了。奇怪的是，html5样板的默认css已经将标题设置为显示块，所以这个p边距肯定应该将标题的高度扩展到页面顶部？
这是因为margin collapsing，p的margin会反映到header及以上的margin。
对我来说，它没有设置标题显示块，它已经由 CSS 重置设置

【解决方案2】：

这有时会有所帮助：

将边距和内边距设置为 0。
并确保将编码设置为：UTF-8 without BOM。

【讨论】：