为什么具有自动边距的块元素在网格内的行为不同？答案

【问题标题】：Why do block elements with margin auto behave differently inside a grid?为什么具有自动边距的块元素在网格内的行为不同？
【发布时间】：2020-10-01 06:09:57
【问题描述】：

通常，当您创建块元素时，该元素的宽度默认为 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>

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

【问题讨论】：

因为在 grid/flexbox 中，margin:auto 会从相应的侧面推动元素以将其缩小到其内容大小。这是默认行为。 Grid/flex 子元素不是display:block，无论其默认显示类型如何。

标签： html css css-grid centering

【解决方案1】：

来自the specification：

默认情况下，网格项目会拉伸以填充其网格区域。但是，如果 justify-self 或 align-self 计算的值不是拉伸或边距是自动的，网格项将自动调整大小以适合其内容。

【讨论】：

【解决方案2】：

在网格和 flex 布局中，自动边距会占用指定空间中的所有可用空间方向。

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

来自问题：

在网格内使用margin: auto 使块元素居中时，元素会缩小以适应内容。

边距在元素的所有侧面均等地消耗可用空间。他们唯一不能消费的是内容（不是可用空间），内容被收缩包装。

您可以通过将 width 显式设置为 100% 来更改此设置。

整行现在是已用空间，而不是可用空间。