如何消除 HTML5 Boilerplate 中标头和容器 div 之间的间隙

Question

我很想使用 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;
}

Answer 1

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

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

Answer 2

这有时会有所帮助：

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