調整容器div內div的邊緣頂部將內部div和容器div從主體推下

我覺得這一定是我做一些愚蠢的事情的問題，但我無法弄清楚。 Here's a demo page showing my problem.頁面的源：調整容器div內div的邊緣頂部將內部div和容器div從主體推下

<html> 
<head> 
    <title>demo</title> 
    <style type='text/css'> 
     body{ 
      margin: 0px; 
      padding: 0px; 
     } 
     #container{ 
      height: 100%; 
      background-color: black; 
     } 
     #logo{ 
      margin: 25px auto auto auto; 
      width: 360px; 
      height: 45px; 
      background-color: goldenrod; 
     } 
    </style> 
</head> 
<body> 
    <div id='container'> 
     <div id='logo'> 
      <p>logotext.</p> 
     </div> 
    </div> 
</body> 
</html>

所以你越是調整保證金的頂值，則進一步下跌的頁面都#logo和#container的拖累獲得。 #container應該保持放置，#logo應該向下移動頁面。

來源

2011-12-16 mikemcg

這裏是測試提琴。在#logo上調整25px的邊距，並注意黑條的下移方式。 http://jsfiddle.net/bzVgV/1/ – mrtsherman 2011-12-16 04:19:28

這是由摺疊邊緣造成的。如果兩個元素的邊距接近，則邊距合併。這個here有一個很好的解釋。轉到名爲Collapsing Margins Between Parent and Child Elements的部分。

以下是三種不同的解決方案。

一是將overflow: auto添加到容器。這改變了BCF（塊格式上下文）。這種技術更詳細地描述here。

#container { 
    height: 100%; 
    background-color: black; 
    /* Add oveflow auto to container */ 
    overflow: auto; 
}

http://jsfiddle.net/bzVgV/20/

第二是在容器而不是在標誌的餘量上使用填充。這使得利潤超出了等式。

#container { 
    height: 100%; 
    background-color: black; 
    /* Use padding on container instead of margin on logo */ 
    padding-top: 30px; 
}

http://jsfiddle.net/bzVgV/18/

的最終解決方案是使利潤不再聯繫。您可以通過向父級添加1px填充來完成此操作。

#container { 
    height: 100%; 
    background-color: black; 
    /* Now margins of container and logo won't touch */ 
    padding-top: 1px; 
}

http://jsfiddle.net/bzVgV/21/

來源

2011-12-16 04:26:06 mrtsherman

摺疊邊緣是我見過的最奇怪的事情。但很高興知道到底發生了什麼。感謝您的幫助！ – mikemcg 2011-12-16 04:49:12

調整容器div內div的邊緣頂部將內部div和容器div從主體推下

回答

相關問題