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

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