Что означает маржа auto?

Я проверил MDN, чтобы узнать, что означает, чтобы иметь автоматическое значение для свойства margin, и он говорит:" auto заменяется некоторым подходящим значением, например, его можно использовать для центрирования блоков.

Но что это такое подходящее значение и подходит для чего?

Я попробовал несколько экспериментов, и я увидел, что если я добавлю margin-left: auto, контейнер пойдет вправо (например, плавает вправо):

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

http://jsfiddle.net/sph2j6jx/

Означает ли это, что добавление маржинальности на самом деле является чем-то вроде "взять все свободное пространство"? И когда вы добавляете левое и правое поля, он центрирует div, потому что он пытается взять все пространство слева и справа?

Ответ 1

Автопоставки

В зависимости от обстоятельств, предоставление автоматического значения инструктирует браузер, чтобы сделать маржу в соответствии со значением, указанным в его собственный стиль. Однако, когда такой запас применяется к элементу с значимой шириной, автоматическая маржа вместо этого вызывает все доступное пространство, которое будет отображаться как пробел.

Из w3.org

Ответ 2

Значение указанного свойства настраивается автоматически в соответствии с содержимым или контекстом элемента.

Например, элемент уровня блока с height: auto будет расти выше, так как он содержит больше текста. В другом примере блочный элемент с margin: 0 auto будет увеличивать левое и правое поля, пока он не станет центрированным вдоль оси y окна просмотра.

Это действительно зависит от свойства, которому вы даете значение, разные свойства ведут себя по-разному в зависимости от содержимого и контекста.

Ссылка - В чем смысл значения` auto` в свойстве CSS.

Ответ 3

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

<div id="main"> Установка ширины элемента уровня блока предотвратит его растяжение до краев его контейнера влево и вправо. Затем вы можете установить левое и правое поля автоматически, чтобы горизонтально центрировать этот элемент внутри своего контейнера. Элемент займет указанную вами ширину, тогда оставшееся пространство будет равномерно распределено между двумя полями. </div>