CSS 边距没有折叠

Question

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

我创建了一些简单的媒体对象并将它们水平堆叠。我添加了 5px 的边距，但是它们之间的 space 看起来是 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

页边距只能垂直折叠，不能水平折叠。你在 <aside> 和 <main> 的 所有边 上有 5px 的保证金，所以应该 [= space 的 13=]。

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

哦，浮动元素的边距（垂直的）不会折叠。

Answer 2

CSS margin collapsing 仅垂直发生在3种情况下：

Adjacent siblings: The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats). For example:

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

Parent and first/last child: If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

Empty blocks: If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.

看看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 margins not collapsing

css

safari

margin

collapse

adobe-brackets