这是一个快速模型来创建一个完整大小的网页,但每当我测试它时,屏幕顶部会有一小块空间.
我怎样才能摆脱顶部的这个小空间？
HTML
<body>
<div id="container">
<header id="header">
<div class="header_container">
<h1 class="header_logo">Blog</h1>
<nav class="menu_nav">
</nav>
</div>
</header>
</div>
</body>
CSS
body,html {
margin: 0;
height: 100%;
}
#container{
height: 100%;
width: 100%;
background-color: orange;
}
#header {
width: 100%;
height: 80px;
background-color: green;
}
.header_container{
margin-left: 50px;
margin-right: 50px;
}
这是由h1顶部的边距引起的.
要解决这个问题,要么为标题赋予overflow:hidden标题更高的标题,要么删除h1的边距margin-top:0.
JSFiddle:http://jsfiddle.net/jdwire/8QV4f/