css - margin 0 自动居中一个元素，为什么 margin 1 auto 不做同样的事情？

Question

我理解 margin: 0 auto; 表示元素顶部和底部的边距大小为 0，左右边距大小均等的元素。

这正如我在下面的示例中预期的那样工作 - 但是当我将其更改为 margin: 1 auto(或任何其他数字)时，内部元素将一直向左移动。我原以为它会保持居中，但会垂直收缩。

代码:

#outer {
  height: 30px;
  background: blue;
}
#inner {
  margin: 0 auto;
  width: 100px;
  height: 100%;
  background: red;
}

<div id="outer">
  <div id="inner"></div>
</div>

Answer 1

将代码更改为 margin: 1 auto 时代码失败的原因是 1 不是有效的 CSS 度量。

只有0可以不写单位(如px或pt)。如果将其更改为 margin: 1px auto，它会按预期工作。