width

Пример

<div class="card">Карточка шириной 16rem</div>

.card {
  width: 16rem;
  padding: 1rem;
  border: 1px solid;
}

Синтаксис

width: auto | <box-size> | <anchor-size()>;

Начальное значение

auto

Применяется к

всем элементам, кроме строчных незаменяемых, строк и групп строк таблицы

Наследуется

нет

Анимируется

как длина или процент; ключевые слова — дискретно

Вычисляемое значение

процент или auto как указано, длины — в абсолютных единицах

Значения

auto

Ширину вычисляет браузер. Блочный элемент в нормальном потоке растягивается на всю ширину родителя, флекс-элемент и абсолютно позиционированный — сжимаются по содержимому. Значение по умолчанию.

Длина

Точная ширина: 300px, 20rem, 50vw.

Процент

Процент от ширины содержащего блока.

min-content

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

max-content

Ширина содержимого без переносов строк.

fit-content

Как max-content, но не шире доступного места. fit-content(20rem) — то же с верхним пределом.

stretch

Растянуть на всю доступную ширину с учётом отступов. Новое значение; раньше браузеры поддерживали его под именами -webkit-fill-available и -moz-available.

Как понять

Чаще всего ширину задавать не нужно: блок и так занимает всю строку, а его высота подстраивается под содержимое. Жёсткая ширина нужна кнопкам, иконкам, колонкам с фиксированным размером.

Для текстовых колонок удобнее max-width: блок растягивается на узком экране и перестаёт расти на широком. width: 100% плюс поля с content-box — частая причина горизонтальной прокрутки.

Примеры

Колонка текста

max-width в ch ограничивает длину строки числом символов:

<p class="text">
  Строки длиннее 60–75 символов читать тяжело: глазу трудно найти начало следующей строки.
  Ограничьте ширину текста — и читать станет легче.
</p>

.text {
  max-width: 40ch;
}

Ширина по содержимому

fit-content делает блок не шире своего текста — удобно для подписей и плашек:

<p class="badge">Новое</p>
<p class="badge">Скоро в продаже</p>

.badge {
  width: fit-content;
  padding: 0.25rem 0.75rem;
  background: gold;
}

Подсказки

• На строчные элементы (span, a, strong) width не действует. Сделайте их inline-block или блочными.
• Процентная ширина считается от содержащего блока, а не всегда от прямого родителя: у абсолютно позиционированного элемента это ближайший позиционированный предок.
• Для адаптивной вёрстки чаще подходят max-width, min-width и функции min(), max(), clamp(), чем жёсткая width.
• В логических свойствах ширине соответствует inline-size — при горизонтальном письме это одно и то же.