適用於頂部的css底部邊距

頂部邊距小於底部邊距的零高度定位的數量等於頁面頂部的底部邊距。給div任何高度或放入任何內容導致其按預期定位。爲什麼是這樣？適用於頂部的css底部邊距

<div style="margin: 2px 0 50px;"></div>

小提琴：http://jsfiddle.net/atfu4waw/

（你將有權檢查元素，查看專區）

來源

2014-12-05 someBSthisis

使用溢出：隱藏;對於div – nikita 2014-12-05 11:20:04

儘管如此，我仍然想知道爲什麼。這背後的規則或邏輯是什麼？ – someBSthisis 2014-12-05 11:25:05

這是因爲邊緣摺疊浮動框和任何其他框之間的邊距不會塌陷（即使在浮動物和其流入兒童之間也不會）。建立新塊格式上下文的元素邊距（例如浮動元素和'可見'以外的'溢出'元素）不會因其流入子元素而崩潰。內嵌塊框的邊距不會摺疊（即使對於它們的流入子項也是如此）。 – nikita 2014-12-05 11:29:30

這是因爲空箱，頂部和底部邊緣崩潰（其中最大的一個被使用並且較小的被忽略）。

從docs：

空塊

如果沒有邊界，填充，內聯內容，高度，或最小高度，以從它的餘量分離塊的邊距底部，然後它的頂部和底部邊緣崩潰。

摺疊邊距是box formatting context的一個特徵，rules for collapsing有時很複雜。

此外，如果你使用的是Chrome瀏覽器開發工具來檢查你的元素，你真的不應該相信緣其代表性，因爲它是不正確渲染（至少在我的版本是不是）。您可以更好地查看其中真正的保證金是由元素後添加內容：

<div style="margin: 20px 0 50px;"></div> 
 
aaaa

來源

2014-12-05 11:23:56

在提示此問題的實際情況中，零高度內部浮動的div最終被錯誤定位。 div之後的內容沒有反映這一點，並且似乎被正確定位。 – someBSthisis 2014-12-05 11:28:53

@someBSthisis我不知道是什麼促成了這個問題，如果你不在問題中說出來的話。問題內容中描述的內容很明確：空白的div既有頂部邊界也有底部邊界。從摺疊邊緣渲染規則中可以看出，它們中最大的將被用作邊距。這就是瀏覽器渲染完成的方式。如果您的浮動和/或內聯內容有更復雜的場景，事情會隨着更多影響渲染的規則而改變。如果你想了解更多，你可以研究我在答案中鏈接的文檔（這將需要幾個小時）。 – 2014-12-05 12:44:10

適用於頂部的css底部邊距

回答

相關問題