保证金自动意味着什么？

Question

我检查了MDN ，看看有什么方法可以获得margin属性的自动值，它说：“auto被替换为一些合适的值 ，例如它可以用于块的居中。”

但是什么是合适的价值，适合什么？

我尝试了一些实验，我看到如果我添加margin-left：auto ，容器会向右移动（就像是浮动到右边）：

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

http://jsfiddle.net/sph2j6jx/

这是否意味着添加保证金自动实际上就像“占用所有可用空间”？ 当你添加左右边距时，它会使div居中，因为它试图从左边和右边占据所有空间？

Answer 1

自动保证金

根据具体情况，提供自动值会指示浏览器根据自己的样式表中提供的值渲染边距。 但是，当这样的边距应用于具有有意义宽度的元素时，自动边距会导致所有可用空间呈现为空白。

来自w3.org

Answer 2

根据元素的内容或上下文自动调整所述属性的值。

例如， height: auto的块级元素将随着包含更多文本而变得更高。 另一个例子， margin: 0 auto的块元素将使左右边距增加，直到它沿着视口的y轴居中。

它实际上取决于您赋予值的属性，不同的属性根据内容和上下文的不同而有所不同。

参考 - CSS属性中`auto`值的含义是什么？

Answer 3

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

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