元素忽略容器元素的填充

我有以下的HTML/CSS代碼：元素忽略容器元素的填充

<div id="container" style="padding:5px; width:600px;"> 
    <div id="panel"> 
     <a style="padding:5px; color:#ffffff; background-color:#000000;">Page 1</a> 

     <!-- Other anchor elements --> 
    </div> 

    <!-- Other panels --> 
</div>

我很難理解爲什麼#panel元素坐在舒適的#container內;服從它的填充規則，而填充#panel中的錨元素的填充與#container重疊。任何人都會介意解釋爲什麼會出現這種情況，並且這樣做或許會提出一個解決方案？

來源

2012-09-05 TheBoss

我認爲，因爲它發生了內聯元素，如果您將其顯示更改爲inline-block，則填充不再重疊。 DEMO

來源

2012-09-05 02:53:53 Musa

謝謝，這是行得通的，但是你知道爲什麼內聯元素的行爲與我在OP中描述的一樣嗎？ – TheBoss

@TheBoss看到[this]（http://stackoverflow.com/questions/1401140/padding-the-top-and-the-bottom-of-inline-element）問題 – Musa

謝謝。我確實希望這種行爲有一個很好的理由，或者如果有的話，解釋原因的資源。 – TheBoss

-1

@Musa是正確的元素錨元素需要設置爲display:inline block;或display:block並設置寬度。

來源

2012-09-05 03:38:07

元素忽略容器元素的填充

回答

相關問題