CSS邊緣不塌陷

Question

我在Mac上使用括號並使用Safari。

我已經創建了一些簡單的媒體對象並將其水平堆疊。 我已經添加了5px的邊距，但它們之間的空間看起來是10px。 爲什麼邊緣不會塌陷？

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#container { 
 
    margin: 0 auto; 
 
    width: 800px; 
 
    background-color: blue; 
 
    overflow: hidden; 
 
} 
 

 
aside { 
 
    float: left; 
 
    background-color: yellow; 
 
    width: calc(20% - 10px); 
 
    margin: 5px; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
main { 
 
    float: left; 
 
    background-color: greenyellow; 
 
    width: calc(80% - 10px); 
 
    margin: 5px; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
}

<div id="container"> 
 
    <aside></aside> 
 
    <main></main> 
 
</div>

Answer 1

CSS緣塌陷僅發生垂直&下3情況：

鄰兄弟姐妹：相鄰兄弟姐妹的頁邊距摺疊（除了當以後需要同級過去浮筒被清除）。例如：

<p>The bottom margin of this paragraph is collapsed...</p> 
<p>...with the top margin of this paragraph.</p> 

家長和第一/最後一個孩子：如果沒有邊框，填充，內嵌的內容，block_formatting_context創建或間隙塊的上邊距從邊緣分離 - 第一個子區塊的頂部，或沒有邊框，填充，內聯內容，高度，最小高度或最大高度以將塊的邊緣底部與其最後一個孩子的邊緣底部分開，然後這些邊緣摺疊。摺疊後的保證金最終在家長之外。

空塊：如果沒有邊框，填充，內聯內容，高度或最小高度以將塊的邊緣頂部與邊緣底部分開，則其頂部和底部邊距將摺疊。

看看Margin Collapsing here in MDN。

在你的情況下，他們不會崩潰，你最好申請保證金只有一方排除在該行中最後一個項目：

aside { 
    float: left; 
    background-color: yellow; 
    width: calc(20% - 10px); 
    margin-right: 5px; 
    padding: 10px; 
    box-sizing: border-box; 
} 

aside.last { 
    margin-right: 0; 
} 

Answer 2

邊距只有崩潰垂直，水平不。您有5px的保證金各方的<aside>和<main>所以有應該是10px的空間。

<aside> left margin + <main> right margin = 10px

哦，和利潤率（垂直的）不塌陷的浮動元素。