第一個元素的margin-bottom是10px，第二個元素的margin-top是10px，這個margin-top只有在我把值設置的大於margin-bottom時才工作，爲什麼？

Question

我不知道，但li元素margin-top只會在h2元素的margin-bottom大時才起作用，我想知道爲什麼？

<h2 style="padding:0px; margin:0; height:30px; line-height:30px; background-color:#FF0000; font-size:18px; font-family:Arial; margin-bottom:10px;">Test1</h2> 
<ul style="list-style:none; padding:0; margin:0;"> 
<li style="height:50px; line-height:50px; background-color:#00FF00; font-size:12px; font-family:Arial; margin-top:10px;">Test2</li> 
</ul> 

謝謝。

Answer 1

您所描述的聽起來很像摺疊邊距。

我建議看看http://reference.sitepoint.com/css/collapsingmargins，因爲詳細介紹了問題以及解決問題的方法。