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

Ответ 1

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

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

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

Ответ 2

автоматически означает автоматическое добавление. Самая распространенная причина, по которой я использую auto:

margin: 0 auto;

чтобы центрировать элемент.

Обратите внимание: если размер не объявлен, он не будет работать.

Пример 1: div не центрирован, авто не работает

<style>
    .cont {
        margin: 0 auto;
    }
</style>
<div class="cont"></div> 

Пример 2: div центрируется на странице

<style>
    .cont {
        width: 1000px;
        margin: 0 auto;
    }
</style>
<div class="cont"></div> 

Ответ 3

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

<style>
    #outer{
        width: 500px;
        height: 500px;
        border: solid 2px black;
    }
    #inner{
        width: auto;
        height: auto;
        background-color: aqua;
    }
</style>
<div id="outer">
<div id="inner">content</div>
</div>