4

これは、フルサイズの Web ページを作成するための簡単なモックアップですが、これをテストするたびに、画面の上部に小さなスペースが表示されます。

上部のこの小さなスペースを取り除くにはどうすればよいですか?

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;
}
4

1 に答える 1

5

これは、h1 の上部の余白が原因です。

これを修正するには、ヘッダーに のプロパティをoverflow:hidden指定してヘッダーを高くするか、 を使用して h1 のマージンを削除しmargin-top:0ます。

JSFiddle: http://jsfiddle.net/jdwire/8QV4f/

于 2013-10-02T19:24:32.703 に答える