CSS邊緣推動身體元素

我爲div元素設置了一個邊距，但body元素也獲得了這個邊距。CSS邊緣推動身體元素

考慮以下代碼：

<!-- HTML --> 
<body> 
    <div> 
    </div> 
</body> 

<!-- CSS --> 
<style> 
    html,body { 
    height:100%; 
    margin:0; 
    padding:0; 
    outline:1px solid blue; 
    } 

div { 
    margin:20px; 
    outline:1px solid red; 
} 

</style>

這是結果和問題：

到目前爲止，我已經加入了border:1px solid transparent;屬性body元素解決了這個問題。這會破壞100％的高度，因爲由於1px邊框會出現滾動條。爲什麼會發生？

可能的解決方案（感謝您的幫助）：添加padding-top:1px和margin-top:-1px，這樣一來100％的高度不得到與滾動條和您的保證金，避免崩潰毀了。

來源

2011-10-12 Rich

您正在使用哪種DOCTYPE？ – PseudoNinja

<！doctype html> – Rich

最好的解決方案可能是像在@Chris Nicholson提供的鏈接中指出的那樣，在父級上添加'overflow：auto;' – jamietelin

這聽起來類似於我遇到的問題：Margins and negative margins。我通過填充頂部而不是邊框來解決我的問題，也許這與您的設計稍微更好一些？否則，請嘗試以下鏈接：http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

來源

2011-10-12 15:43:56 Chris

這是由稱爲摺疊邊距的效應引起的。

某些相鄰邊距合併形成一個邊距。這些邊際被認爲是「崩潰」。如果沒有非空的內容，填充或邊界區域或空格來分隔它們，邊距就是相鄰的。

http://www.w3.org/TR/css3-box/#collapsing-margins

來源

2011-10-12 15:45:29 Jrod

CSS邊緣推動身體元素

回答

相關問題