CSS保證金意外的行爲

Question

假設我有以下的HTML代碼

<div class="f1"> 
    <div class="f2"> 
    </div> 
</div> 

下面CSS適用於它

.f1 { 
    width: 200px; 
    height: 200px; 
    background: #fff; 
    margin: 5em auto; 
} 


.f2 { 
    background: #000; 
    width: 100px; 
    height: 100px; 
    margin: 20px; // this doesn't work 
} 

然後我看到一個奇怪的行爲的margin-top屬性沒有按不適用於班級.f2。我不是爲什麼，但是當我在類f1上添加一些填充或邊框時，它就可以工作。你能解釋一下嗎？

Answer 1

您的問題正在崩潰邊緣，檢查http://www.w3.org/TR/CSS2/box.html#collapsing-margins

你可以從.f2添加padding到.f1代替margin的。