为什么带有 margin auto 的块元素在网格中表现不同？

Question

通常情况下，当您创建块元素时，该元素的宽度默认为 100%。该规则仍然适用于网格内部，除非您尝试使用 margin: auto 将元素居中。当在网格内使用 margin: auto 将块元素居中时，元素会缩小以适合内容。您可以通过将宽度明确设置为 100% 来更改此设置。我在下面包含了一个简单的演示。

.block {
  display: block;
  border: solid 3px green;
}

.grid {
  display: grid;
  border: solid 3px blue;
}

.content {
  border: solid 3px red;
  margin: 0.5rem auto;
  max-width: 30rem;
}

<div class="block">
  <div class="content">Some content in a block</div>
</div>
<div class="grid">
  <div class="content">Some content in a grid</div>
</div>

有人可以解释为什么会这样吗？

Answer 1

来自the specification：

By default, grid items stretch to fill their grid area. However, if justify-self or align-self compute to a value other than stretch or margins are auto, grid items will auto-size to fit their contents.

Answer 2

在网格和弹性布局中，自动边距会占用指定区域中的所有可用空间 space 方向.

例如，margin-top: auto表示元素和容器顶部之间的所有空闲space将被消耗，尽可能向下移动元素。

来自问题：

When centering a block element using margin: auto inside a grid the element shrinks to fit the contents.

边距在元素的所有边均等地消耗免费 space。他们唯一不能消费的是内容（不是免费的 space），让内容被压缩包装。

You can change this by explicitly setting the width to 100%.

现在使用整行 space，不免费 space。

为什么带有 margin auto 的块元素在网格中表现不同？

Why do block elements with margin auto behave differently inside a grid?

html

css

centering

css-grid