Справочник HTML & CSS

width

Ширина элемента.

Синтаксис

width: value;

Значения

Параметр	Тип	Описание
px	length	Фиксированная ширина: `300px`.
%	percentage	Процент от ширины родителя.
auto	keyword	Блоки занимают всю доступную ширину (по умолчанию).
fit-content	keyword	По ширине содержимого, но не шире родителя.

Примеры

Фиксированная, процентная и автоматическая ширина:

<style>
  div { background: lightskyblue; padding: 6px; margin-bottom: 6px; }
</style>
 
<div style="width: 200px;">200px</div>
<div style="width: 50%;">50% of the parent</div>
<div>auto — the full width</div>

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

<div style="width: fit-content; background: gold; padding: 6px;">As wide as the text</div>

Примечания

По умолчанию width задаёт ширину только содержимого, а внутренние отступы и рамка добавляются сверху — box-sizing: border-box это меняет. Строчные элементы вроде <span> игнорируют width. Для адаптивной вёрстки лучше max-width, чем фиксированная width.

См. также

height — Высота элемента.
max-width — Максимальная ширина: элемент может быть уже, но не шире.
min-width — Минимальная ширина: уже элемент стать не может.
box-sizing — Входят ли в `width` и `height` внутренние отступы и рамка.

Вопросы и ответы по теме

В учебнике

Блочная модель — Из чего состоит элемент в CSS — содержимое, padding, border и margin, размеры, центрирование и box-sizing.

Спасибо, что читаете!