CSS页边距未折叠

我在Mac上使用括号，并使用Safari

我创建了一些简单的媒体对象，并将它们水平堆叠。 我添加了5倍的边距，但它们之间的间距看起来是10倍。 为什么利润率没有崩溃

*{
保证金：0；
填充：0；
}
#容器{
保证金：0自动；
宽度：800px；
背景颜色：蓝色；
溢出：隐藏；
}
旁白{
浮动：左；
背景颜色：黄色；
宽度：钙（20%-10px）；
保证金：5px；
填充：10px；
框大小：边框框；
}
主要{
浮动：左；
背景颜色：绿黄色；
宽度：钙（80%-10px）；
保证金：5px；
填充：10px；
框大小：边框框；
}

---

页边距只能垂直折叠，不能水平折叠。您在

和

的

5px

四周都有

left margin+right margin=10px

噢，浮动元素的边距（垂直边距）不会折叠。
CSS边距折叠仅在垂直方向发生，在3种情况下发生：

相邻同级：相邻同级的边距被折叠（除非后面的同级需要通过浮动清除）。例如：

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

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

aside.last {
  margin-right: 0;
}