如何消除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}