爲什麼嵌套的HTML元素會讓我的CSS跳轉？

Question

這是一個謎題。基本的頁面，一個元素：

http://jsfiddle.net/PZj6t/

HTML：

<div id="container"></div>​ 

CSS：

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background-color: black; 
} 
#container { 
    position: relative; 
    margin: 0 auto; 
    width: 400px; 
    height: 100%; 
    background-color: #666; 
} 
​ 

這一個看起來我怎麼想，與#container的整齊齊平頂端。但是，當我添加一個嵌套元素：

http://jsfiddle.net/PZj6t/1/

HTML：

<div id="container"> 
    <nav id="topnav"></nav> 
</div>​ 

CSS（新）：

#topnav { 
    width: 100%; 
    height: 40px; 
    margin: 30px 0; 
    background-color: red; 
} 
​ 

容器跳下來。似乎從#topnav的邊緣頂部以某種方式傳遞給容器，現在該頁面有一個我不想要的滾動條。 （我正在Chrome中進行測試。）我如何防止這種情況發生？

（作爲進一步的謎，如果我添加border: 1px solid white;到＃集裝箱的CSS，跳躍消失。這將是罰款，但還增加了兩個象素值得不良滾動到頁面。）

Answer 1

這是由於CSS的一個叫做邊緣摺疊的功能。如果父元素上沒有填充或邊框，則父元素及其子元素的邊距會「摺疊」爲較大的值，並且基本上應用於父元素。

對於你的情況，我建議簡單地把容器內的附加內包裝，並拋出它的一些填充來模擬你正在尋找：29.3 http://jsfiddle.net/PZj6t/3/

的#inner股利或低於內的所有內容應該像您期望的那樣行事，因爲邊距只有在他們父母的邊緣時纔會崩潰（並且沒有填充或邊框）。

Answer 2

display:inline-block; 

在您的導航元素出現將解決此問題。其關於邊緣摺疊的更多細節請參見here。

Answer 3

Jblasco是正確的，這是一個整潔的解決方案，但：http://jsfiddle.net/PZj6t/4/

#container { 
    position: relative; 
    margin: -1px auto 0; 
    width: 400px; 
    height: 100%; 
    padding-top:1px; 
    background-color: #666; 
} 
#topnav { 
    width: 100%; 
    height: 40px; 
    margin: 29px 0 30px; 
    background-color: red; 
} 

Answer 4

#container { 
    margin: 0 auto; 
    width: 400px; 
    height: 100%; 
    background-color: #666; 
    border:1px solid; 
} 

http://jsfiddle.net/PZj6t/12/

Update: 

http://jsfiddle.net/PZj6t/1/
兩個container和topnav

申請