爲什麼兩個元素只有50個像素分開時，頂部元素的邊距爲50px，底部元素的邊距爲50px？

我需要確保兩個元素總是隔開100個像素。我的代碼沒有錯誤，但由於某種原因，P標籤上的margin-bottom設置爲50像素，其下的DIV上的margin-top也設置爲50像素。爲什麼兩個元素只有50個像素分開時，頂部元素的邊距爲50px，底部元素的邊距爲50px？

而不是總共100px，他們只有50個。有人可以解釋這一點嗎？我沒有任何浮動頁面，所以它不是由於清除問題。所有的HTML和CSS都已經過驗證。

這發生在最新版本的Chrome和FIrefox 3.6中。

這裏是我的代碼示例：

#content p { 
    margin-bottom: 50px; 
} 

#content #posted { 
    border-top: 1px dotted #ccc; 
    line-height: 20px; 
    margin-top: 50px; 
}

2011-04-27 Cofey

請問您可以發佈相關代碼嗎？ – Titus 2011-04-27 23:01:23

我猜大多數人希望看到一些代碼來驗證你在做什麼。 – 2011-04-27 23:02:12

在彼此的頂部邊距重疊。元素的最大邊距將是兩個元素之間的邊距。

如果這不是IE中發生的事情，那是IE錯誤，因爲這是CSS設計的工作原理。

您可以使用填充代替，或者只是確保兩個元素的邊距都是100px。

2011-04-27 23:03:49

謝謝 - 不能使用頂部填充，因爲有邊框。 – Cofey 2011-04-27 23:06:23

沒有問題，與100px的邊緣:) – 2011-04-27 23:07:22

邊距不像這樣堆疊。底部元素僅設置頂部元素的邊距爲50px，而不是頂部元素的邊距。因此，您需要將邊距設置爲100px。

2011-04-27 23:05:41 LostLin

回答