Справочник CSS

Width: ширина элемента

width задаёт ширину области содержимого или всей коробки при box-sizing:border-box.

Значения

.fixed { width: 320px; }
.fluid { width: 100%; }
.label { width: fit-content; }

Процент рассчитывается от содержащего блока. Auto оставляет расчёт браузеру.

Box-sizing

* { box-sizing: border-box; }
.field { width: 100%; padding: 12px; }

Border-box включает padding и border в указанную ширину.

Адаптивность

Для контента чаще сочетай width с max-width, чтобы блок сжимался на телефоне, но не растягивался на большом экране.

Ошибки

Фиксированная ширина шире мобильного экрана.
Width задают строчному элементу.
Не учитывают padding без border-box.

Попробуй

Создай поле на всю ширину контейнера и кнопку шириной по содержимому.

Как ширина рассчитывается на практике

width задаёт ширину области содержимого, но итоговый размер зависит от box-sizing, padding и border. При стандартном content-box отступы и границы прибавляются сверху. Поэтому в проектах часто включают box-sizing: border-box для всех элементов — тогда объявленная ширина уже включает внутренние отступы и границу.

Для адаптивного блока редко нужна жёсткая ширина в пикселях. Комбинация width: 100% и max-width ограничивает блок на больших экранах, но позволяет ему сжиматься на маленьких. Значение auto оставляет расчёт браузеру, а fit-content подстраивает размер под содержимое в доступных пределах.

Разберём рабочий пример

* { box-sizing: border-box; }

.container {
  width: min(100% - 32px, 960px);
  margin-inline: auto;
}

.card { width: 100%; }

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

Проверка перед использованием

Учтён box-sizing.
Блок не создаёт горизонтальную прокрутку.
Есть ограничение max-width или функция min().
Макет проверен на узком экране.

Попробуй в браузере

Измени код и нажми «Запустить». Результат появится ниже.