margin 0 auto一个元素，为什么margin 1 auto也不一样？

Question

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

这正如我在以下示例中所期望的那样 - 但是当我将其更改为margin: 1 auto（或任何其他数字）时，内部元素会一直移动到左侧。我原以为它会保持中心但是会垂直缩小。

代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

只有0可以在没有单位的情况下编写（例如px或pt）。如果您将其更改为margin: 1px auto，则会按预期工作。

Answer 2

使用自动后的像素。

＆＃13;

＆＃13;

#inner {
	
    margin:auto 5px;
    width: 100px;
    height: 100%;
    background:red;
}

＆＃13;

＆＃13;

＆＃13;

祝你好运