Html 如何在 HTML5 Boilerplate 中消除标题和容器 div 之间的间隙
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7461275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove gap between header and container div in HTML5 Boilerplate
提问by techHymaner
I'm keen to use Paul Irish's HTML5 boilerplate but I've encountered a css problem.
我很想使用 Paul Irish 的 HTML5 样板，但我遇到了 css 问题。
I want the header to be flush at the top of the page but I can't the container div adds a gap that I'm unable to get rid of.
我希望标题在页面顶部齐平，但我不能容器 div 添加一个我无法摆脱的间隙。
I think this has something to do with the clearfix for the footer. I've tried experimenting with different padding sizes for the footer and container div but to no avail.
我认为这与页脚的清除修复有关。我曾尝试为页脚和容器 div 尝试不同的填充大小，但无济于事。
This is the html code:
这是html代码：
<header>
<p> header content </p>
</header>
<div id="main" role="main">
</div>
<footer>
<p> footer content </p>
</footer>
My custom CSS:
我的自定义 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;
}
采纳答案by sandeep
@techHymaner; may be you have to write like this:
@techHymaner; 可能你必须这样写：
header{display:block}
p{margin:0;padding:0}
回答by Kerim
This sometimes help:
这有时会有所帮助：
- Set margins, and padding to 0.
- And make sure that encoding is set to: UTF-8 without BOM.
- 设置边距和填充为 0。
- 并确保编码设置为：UTF-8 without BOM。
