保证金自动意味着什么？

Question

我检查了MDN，看看有什么方法可以获得保证金属性的自动值，它说：＆＃34; auto 被某些合适的值替换，例如它可以用于块的居中。＆＃34;

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

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

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

http://jsfiddle.net/sph2j6jx/

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

Answer 1

  

自动边距

     

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

来自w3.org

Answer 2

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

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

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

参考 - What is the meaning of `auto` value in a CSS property.

Answer 3

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

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