CSS网格是否会抑制网格项目内的边距折叠？

Question

我了解 CSS 网格元素会抑制 在 相邻的子网格项目之间（相邻的兄弟姐妹）之间的边距折叠。

但我认为我看到的是，网格元素似乎也抑制了边距折叠在单个网格项目中，通过抑制该项目与该项目自己的子项之间的边距折叠（父-后代边距折叠）。

这是怎么回事？这是应该发生的事情吗？

你可以像这样在 sn-p 中看到它：

main {  
  display: grid; 
  outline: 1px solid green;
}

section {
  margin: 25px 0 25px 0;
  outline: 1px solid red;
}

div {
  margin: 25px 0 25px 0;
  outline: 1px solid blue;
}

<main>
  <section>
    <div>X</div>
    <div>Y</div>
  </section>
</main>

正如你所看到的，如果你运行这个 sn-p，X 和 Y 之间有 25 px 的空间。这是因为 X 的 25px margin-bottom 与它相邻的兄弟 Y 的 25px margin-top 重叠，正如预期的那样。

但是在 X 内容区域（蓝色轮廓）和网格项目内容区域的顶部（绿色轮廓）之间有 50 px 的空间。这似乎是因为 X div's 25px margin-top 与section's 25px margin-top 相加而不是折叠。这让我感到困惑。

如果您将 main 切换到 display:block，那么您将获得正常的折叠行为，其中 div 和 section 的 margin-top 一起折叠。它们还与main 本身的顶部边缘一起折叠，以便边缘空间延伸到main 的内容区域之外（以绿色勾勒）。

我不明白为什么会发生这种情况，也看不出规范中有什么暗示网格应该影响在网格项内的折叠行为。

Answer 1

来自the specificaton：

网格项为其内容建立独立的格式化上下文。但是，网格项是网格级框，而不是块级框：它们参与容器的网格格式化上下文，而不是块格式化上下文。

和

建立新的块格式化上下文的元素的边距（例如浮动和具有“溢出”而不是“可见”的元素）不会与其流入的子元素一起折叠。@987654322 @

因此，inside 网格项的边距不能与 outside

的网格项的边距一起折叠

如果所有相关的边距都在inside

，您可以让边距折叠inside网格

main {
  display: grid;
}

section {
  margin: 25px 0;
  outline: 1px solid red;
}

div {
  margin: 25px 0;
  outline: 1px solid blue;
}

<main>
  <section>
    <div>X</div>
    <div>X</div>
  </section>
</main>

如您所见，我们在网格项内的两个 div 之间只有 25px