margin auto是什么意思？

Question

我检查了MDN，看看有什么方法可以有一个保证金属性的自动值，它说：“汽车是取代某个合适的值，例如它可以用于块的居中。

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

我想我自己的一些实验，我发现如果我添加保证金左：自动，容器去右（就像漂浮到右）：

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

http://jsfiddle.net/sph2j6jx/

不这意味着增加margin auto实际上就像“占用所有可用空间”一样？并且，当您添加左右边距时，它会将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>