Еще одно значение свойств CSS, которое, во первых используется довольно часто, во вторых оно используется для многих элементов по умолчанию. Т.е. если вы не указали значение для какого-то стиля CSS напрямую, то чаще всего, по умолчанию, он будет иметь значение auto.

Что значит это значение?

Я подготовил небольшой пример, на котором можно посмотреть, как это работает.

<p style="width:auto; border:1px solid #ccc;">Абзац</p>

auto - происходит от слова "автоматический".

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

Например, свойство width, которое отвечает за ширину элемента, по умолчанию, имеет значение свойства CSS width - auto. В примере, это свойство и значение просто продублированы.

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

Если открыть панель разработчика браузера и перейти в режим Computed (см. видео) и начать уменьшать размеры области просмотра браузера, мы с вами увидим, как браузер автоматически пересчитывает значение свойства width для выбранного абзаца.

Браузер автоматически рассчитывает значение для этого свойства, т.к. у него есть значение свойства CSS auto.

Если мы укажем какое-то конкретное значение для свойства width.

<p style="width:300px; border:1px solid #ccc;">Абзац</p>

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

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

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