CSS边距不折叠

Posted 2023-03-24

【中文标题】CSS边距不折叠

【英文标题】：CSS margins not collapsing

【发布时间】：2017-07-27 22:27:43

【问题描述】：

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

【问题讨论】：

joshwcomeau.com/css/rules-of-margin-collapse

【参考方案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-top 与其第一个子级的 margin-top 分开块，或者没有边框、填充、内联内容、高度、最小高度或最大高度来将块的边距底部与其最后一个子块的边距底部分开，然后这些边距折叠。折叠的边距最终在父级之外。

空块：如果没有边框、内边距、内联内容、高度或最小高度将块的上边距与下边距分开，则其顶部和底部边距折叠.

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

【参考方案2】：

边距仅垂直折叠，而不是水平折叠。在<aside> 和<main> 的所有边 上都有5px 的边距，所以应该有10px 的空间。

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

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