Question

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

我创建了一些简单的媒体对象并将它们水平堆叠。我添加了5px的边距，但它们之间的空间看起来是10px。为什么边距不会崩溃？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

边距仅垂直折叠，而不是水平折叠。您在5px和<aside>的所有方上有<main>个保证金，因此应该 10px空间。

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

哦，边缘（垂直边缘）不会因浮动元素而崩溃。

Answer 2

CSS边距折叠仅垂直发生＆amp;在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边距不会崩溃

2 个答案: