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

Question

我知道CSS网格元素会抑制相邻(相邻同级(子网格项之间的边距折叠。

但我认为我看到的是，网格元素似乎也通过抑制单个网格项和该项自己的子项之间的边距折叠(父-子-边距折叠(来抑制该网格项内的边距折叠。

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

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

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像素的空间。这是因为正如预期的那样，X的25像素页边空白底部正在与其相邻的兄弟Y的25像素的页边空白顶部折叠。

但是在X内容区域(用蓝色勾勒(和网格项内容区域顶部(用绿色勾勒(之间有50像素的空间。这似乎是因为Xdiv的25像素页边空白顶部是添加而不是与section的25像素页边距顶部折叠。这就是我感到困惑的地方。

如果将main切换到display:block，则会得到正常的折叠行为，其中div和section的页边空白顶部折叠在一起。它们也随着main本身的页边空白顶部而塌陷，从而使页边空白延伸到main的内容区域之外(用绿色勾勒(。

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

Answer 1

根据规范：

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

和

建立新的块格式上下文的元素(如浮动和具有"overflow"而非"visible"的元素(的页边距不会与其流入子级一起塌陷^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