Я проверил MDN, чтобы узнать, что означает, чтобы иметь автоматическое значение для свойства margin, и он говорит:" auto заменяется некоторым подходящим значением, например, его можно использовать для центрирования блоков.
Но что это такое подходящее значение и подходит для чего?
Я попробовал несколько экспериментов, и я увидел, что если я добавлю margin-left: auto, контейнер пойдет вправо (например, плавает вправо):
#container {
background: red;
width: 120px;
margin-left: auto;
}
Означает ли это, что добавление маржинальности на самом деле является чем-то вроде "взять все свободное пространство"? И когда вы добавляете левое и правое поля, он центрирует div, потому что он пытается взять все пространство слева и справа?
Автопоставки
В зависимости от обстоятельств, предоставление автоматического значения инструктирует браузер, чтобы сделать маржу в соответствии со значением, указанным в его собственный стиль. Однако, когда такой запас применяется к элементу с значимой шириной, автоматическая маржа вместо этого вызывает все доступное пространство, которое будет отображаться как пробел.
Из w3.org
Значение указанного свойства настраивается автоматически в соответствии с содержимым или контекстом элемента.
Например, элемент уровня блока с height: auto будет расти выше, так как он содержит больше текста. В другом примере блочный элемент с margin: 0 auto будет увеличивать левое и правое поля, пока он не станет центрированным вдоль оси y окна просмотра.
Это действительно зависит от свойства, которому вы даете значение, разные свойства ведут себя по-разному в зависимости от содержимого и контекста.
#main {
width: 600px;
margin: 0 auto;
}
<div id="main"> Установка ширины элемента уровня блока предотвратит его растяжение до краев его контейнера влево и вправо. Затем вы можете установить левое и правое поля автоматически, чтобы горизонтально центрировать этот элемент внутри своего контейнера. Элемент займет указанную вами ширину, тогда оставшееся пространство будет равномерно распределено между двумя полями. </div>