HTML/Body沒有封裝整個高度

這是一個快速的模型來創建一個完整的網頁，但是無論何時我測試這個，屏幕上方都會出現一個小小的空白空間。HTML/Body沒有封裝整個高度

我怎樣才能擺脫頂部的這個小空間？

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

來源

2013-10-02 TheSunny

這是由在H1的頂部邊緣造成的。

要解決此問題，請爲標頭指定overflow:hidden的屬性以使標頭更高，或使用margin-top:0刪除h1的邊距。

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

來源

2013-10-02 19:24:32

經典的塌陷邊緣綜合徵！ –

你能解釋爲什麼會發生？ – TheSunny

@ TheSunny我認爲這是[這裏]描述的類型（https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing），但基本原理是保證金，而不是僅僅移動h1泄漏到外面並移動容器。我的理解結束於弄清楚發生了什麼。我不完全明白爲什麼。 –

HTML/Body沒有封裝整個高度

回答

相關問題