Значение свойства css auto.

Довольно часто при просмотре стилей CSS, которые используются на каких-либо сайтах, можно встретить, как некоторые свойства имеют значение auto.

Что это значит и какие характеристики приобретает элемент, если ему задать такое значение?

Об этом поговорим прямо сейчас.

auto - это сокращение от слова automatic (с англ. языка переводится как автоматический). Само определение говорит само за себя. Если задавать его свойствам CSS, то браузер будет автоматически подбирать нужное значение для свойства.

Как правило, если свойству не задано какое-то конкретное значение, то оно автоматически будет находится в значении auto.

Чаще всего значение auto применяется к следующим элементам:

width

height

overflow

margin

padding

и др.

Для разных элементов и в различных ситуациях поведение элементов с этим значением может быть различным.

Давайте рассмотрим несколько примеров для понимания.

Вот как будут вести себя блочные элементы если значение ширины для них задать в значение auto:

<div style="background:#999; color:white; width:auto;">Блочный элемент со значением width:auto</div><br>
<div style="width:400px;">
<div style="background:#999; color:white; width:auto;">Блочный элемент со значением width:auto в родительском элементе с шириной 400px</div>
</div>

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

Если для блочного элемента задать значение высоты height в значение auto, то он будет ровно такой высоты, чтобы вместить в себя все содержимое, которое в нем находится:

<div style="background:#999; color:white; height:auto;">Блочный элемент с значением height:auto</div>
<br>
<div style="background:#999; color:white; height:100px;">Блочный элемент с значением height:100px;</div>

Теперь, если для блочного элемента явно задать ширину и задать в значение auto свойство margin, то элемент будет выровнен по центру.

<div style="width:300px; margin:auto;">Блок, который выравнивается по центру</div>

Браузер автоматически просчитывает какие отступы должны быть у элемента, чтобы он выравнивался по центру.

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

<p> Текст <span style="width:auto; height:auto; color:#fff; background:#356;">Строчный элемент</span></p>

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