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

Question

我知道 CSS 网格元素抑制边距折叠在 child 相邻的网格项之间（相邻的兄弟）。

但我认为我看到的是网格元素似乎也抑制了在单个网格项目中的边距折叠，方法是抑制该项目与该项目的边距折叠拥有children（parent-descendant保证金崩溃）。

是这样吗？这是应该发生的事情吗？

您可以在这样的片段中看到它：

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>

如您所见，如果您运行此代码段，X 和 Y 之间有 25 像素 space。这是因为 X 的 25 像素 margin-bottom 与其相邻的像素重叠正如预期的那样，兄弟 Y 的 25px margin-top。

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

如果将 main 切换到 display:block，则会出现正常的折叠行为，其中 div 和 section 的 margin-top 一起折叠。它们还与 main 本身的 margin-top 一起折叠，因此边缘 space 延伸到 main 的内容区域之外（绿色轮廓）。

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

Answer 1

来自 the specificaton:

A grid item establishes an independent formatting context for its contents. However, grid items are grid-level boxes, not block-level boxes: they participate in their container’s grid formatting context, not in a block formatting context.

和

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.^ref

所以网格项的边距内部不能与外部

的网格项的边距折叠

如果所有相关边距都在内部

，您可以让边距折叠内部

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

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

Does CSS grid suppress margin collapse inside grid items?

css

margin

css-grid