保证金自动意味着什么？

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>