什么是margin auto的意思？

Question

我查询了MDN，了解关于 margin 属性设置为 auto 的含义，它指出："auto 会被替换为一些适当的值，例如用于块的居中。"

但是什么是这个适当的值，以及适合什么情况使用呢？

我自己进行了一些实验，并发现如果我添加 margin-left: auto，容器就会向右移动（就像漂浮到右边）：

#container {
    background: red;
    width: 120px;
    margin-left: auto;
}

这是否意味着添加margin:auto实际上是类似于“占用所有可用空间”的操作？当您同时添加左右margin时，它会将div居中，因为它试图从左侧和右侧占用所有空间吗？

http://jsfiddle.net/sph2j6jx/

- Alin Ciocan

---

将 margin-right:auto; 定义为下面这样 http://jsfiddle.net/sph2j6jx/1/ - Rohit Azad Malik

Answer 1

自动边距

根据情况，提供auto值指示浏览器根据其自身样式表中提供的值呈现边距。但是，当将此类边距应用于具有意义宽度的元素时，自动边距会导致所有可用空间都呈现为空格。

来源：w3.org

- emmanuel

---

根据情况，提供自动值的指令会告诉浏览器根据其自身样式表中提供的值来呈现边距。嗯，这听起来不太可能。很有趣想知道作者所考虑的情况是什么。 - Alohci

“Meaningful width” 是什么意思？ - Gwater17

@Gwater17 有意义的宽度通常指显式宽度。我同意文档可以更好。 - alaboudi

Answer 2

#main {
  width: 600px;
  margin: 0 auto; 
}

<div id="main">设置块级元素的宽度将防止其向左和向右延伸到其容器的边缘。然后，您可以将左右边距设置为自动，以在其容器内水平居中该元素。该元素将占据您指定的宽度，然后剩余空间将在两个边距之间平均分配。</div>

- Deepak Biswal