css - CSS边距没有崩溃

我在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>

最佳答案

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;
}

关于css - CSS边距没有崩溃，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42652952/