問題的透明保證金

Question

這裏是我的CSS（簡體）：

body { 
    background: url('bg.gif') left top; 
} 
#content { 
    background: #ddd; 
} 
.box { 
    overflow: hidden; 
    margin-top: 10px; 
    background: #1e1e1e url('left-bottom-corner.gif') left bottom no-repeat; 
} 

而且標記：

<div id="content"> 
    <div class="box"> 
     <p>lorem ipsum</p> 
    </div> 
</div> 

現在的問題。在.box有10px頂部邊距的地方，#content div的背景是不可見的，相反，主體的背景是可見的。

我無法使用填充，因爲我需要將.box divs設置爲具有圓形邊框和自己的背景，所以我必須使用邊距。

我該如何解決這個不正確的行爲？

Answer 1

這不是一個錯誤 - 它被稱爲margin collapsing。

你可以用防止邊距觸摸 - 這就是爲什麼添加填充或邊框修復它。