width

Свойство CSS width устанавливает ширину элемента. По умолчанию она равняется ширине внутренней области, но если box-sizing имеет значение border-box, то она будет равняться ширине области рамки.

Свойства min-width и max-width перекрывают width.

Синтаксис

/* <length> значения */
width: 300px;
width: 25em;

/* <percentage> значения */
width: 75%;

/* Значения-ключевые слова */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* Глобальные значения */
width: inherit;
width: initial;
width: unset;

Свойство width указывается как:

Значения

<length>
Ширина - фиксированная величина.
<percentage>
Ширина в процентах - размер относительно ширины родительского блока.
border-box
Если присутствует, то предшествующие <length> или <percentage> применяются к области рамки элемента.
content-box
Если присутствует, то предшествующие <length> или <percentage> применяются к внутренней области элемента.
auto
Браузер рассчитает и выберет ширину для указанного элемента.
fill
Использует fill-available размер строки или fill-available размер блока, в зависимости от способа разметки.
max-content
Внутренняя максимальная предпочтительная ширина.
min-content
Внутренняя минимальная ширина.
available
Ширина содержащего блока минус горизонтальные margin, border и padding.
fit-content
Наибольшее из:
  • внутренняя минимальная ширина
  • меньшая из внутренней предпочтительной ширины и доступной ширины

Формальный синтаксис

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)

где
<length-percentage> = <length> | <percentage>

Примеры

Ширина по умолчанию

p.goldie {
  background: gold;
}
<p class="goldie">Сообщество Mozilla производит множество отличного ПО.</p>

Пиксели и em

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
<div class="px_length">Ширина в пикселях</div>
<div class="em_length">Ширина в em</div>

Проценты

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
<div class="percent">Ширина в процентах</div>

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit используют нестандартное имя */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}
<p class="maxgreen">Сообщество Mozilla производит множество отличного ПО.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}
<p class="minblue">Сообщество Mozilla производит множество отличного ПО.</p>

Проблемы доступности

Убедитесь, что элементы с width не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.

Спецификации

Спецификация Статус Комментарий
CSS Intrinsic & Extrinsic Sizing Module Level 3
Определение 'width' в этой спецификации.
Рабочий черновик Добавляет ключевые слова max-content, min-content, available, fit-content.
CSS Transitions
Определение 'width' в этой спецификации.
Рабочий черновик Определяет width как анимируемое.
CSS Level 2 (Revision 1)
Определение 'width' в этой спецификации.
Рекомендация Уточняет к какому элементу относится
CSS Level 1
Определение 'width' в этой спецификации.
Рекомендация Первоначальное определение.
Начальное значениеauto
Применяется квсе элементы, кроме незаменяемых строчных элементов, табличных строк и групп строк
Наследуетсянет
Процентыссылается на ширину содержащего блока
Обработка значенияпроцент, auto или абсолютная длина
Animation typeдлина, проценты или calc();

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
widthChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
AnimatableChrome Полная поддержка 26Edge Полная поддержка 12Firefox Полная поддержка 16IE Полная поддержка 11Opera Полная поддержка 15Safari Полная поддержка 6.1WebView Android Полная поддержка 4.4Chrome Android Полная поддержка 26Firefox Android Полная поддержка 16Opera Android Полная поддержка 14Safari iOS Полная поддержка 6.1Samsung Internet Android Полная поддержка 1.5
fill
ЭкспериментальнаяНестандартная
Chrome Полная поддержка 46Edge Полная поддержка 79Firefox Нет поддержки НетIE Нет поддержки НетOpera Полная поддержка 33Safari Полная поддержка 12WebView Android Полная поддержка 46Chrome Android Полная поддержка 46Firefox Android Нет поддержки НетOpera Android Полная поддержка 33Safari iOS Полная поддержка 12Samsung Internet Android Полная поддержка 5.0
fit-contentChrome Полная поддержка 46
Полная поддержка 46
Полная поддержка 22
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 1 — 48
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
Edge Полная поддержка 79
Полная поддержка 79
Полная поддержка 79
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 3
С префиксом
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 33
Полная поддержка 33
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 15 — 35
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
Safari Полная поддержка 11
Полная поддержка 11
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
WebView Android Полная поддержка 46
Полная поддержка 46
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 1 — 48
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
Chrome Android Полная поддержка 46
Полная поддержка 46
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 18 — 48
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
Firefox Android Полная поддержка 4
С префиксом
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 33
Полная поддержка 33
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 14 — 35
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
Safari iOS Полная поддержка 11
Полная поддержка 11
Полная поддержка 7
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
Samsung Internet Android Полная поддержка 5.0
Полная поддержка 5.0
Полная поддержка 1.5
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 1.0 — 5.0
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
max-contentChrome Полная поддержка 46
Полная поддержка 46
Полная поддержка 22
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 79
Полная поддержка 79
Полная поддержка 79
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 11
Полная поддержка 11
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
WebView Android Полная поддержка 46Chrome Android Полная поддержка 46Firefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS Полная поддержка 11
Полная поддержка 11
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
Samsung Internet Android Полная поддержка 5.0
min-contentChrome Полная поддержка 46
Полная поддержка 46
Нет поддержки 1 — 48
Альтернативное имя
Альтернативное имя Использует нестандартное имя: min-intrinsic
Edge Полная поддержка 79Firefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 33
Полная поддержка 33
Нет поддержки 15 — 35
Альтернативное имя
Альтернативное имя Использует нестандартное имя: min-intrinsic
Safari Полная поддержка 11
Полная поддержка 11
Полная поддержка 2
Альтернативное имя
Альтернативное имя Использует нестандартное имя: min-intrinsic
WebView Android Полная поддержка 46
Полная поддержка 46
Нет поддержки 1 — 48
Альтернативное имя
Альтернативное имя Использует нестандартное имя: min-intrinsic
Chrome Android Полная поддержка 46
Полная поддержка 46
Нет поддержки 18 — 48
Альтернативное имя
Альтернативное имя Использует нестандартное имя: min-intrinsic
Firefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 33
Полная поддержка 33
Нет поддержки 14 — 35
Альтернативное имя
Альтернативное имя Использует нестандартное имя: min-intrinsic
Safari iOS Полная поддержка 11
Полная поддержка 11
Полная поддержка 1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: min-intrinsic
Samsung Internet Android Полная поддержка 5.0
Полная поддержка 5.0
Нет поддержки 1.0 — 5.0
Альтернативное имя
Альтернативное имя Использует нестандартное имя: min-intrinsic
stretch
Экспериментальная
Chrome Полная поддержка 22
Альтернативное имя
Полная поддержка 22
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Edge Полная поддержка 79
Альтернативное имя
Полная поддержка 79
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Firefox Полная поддержка 3
Альтернативное имя
Полная поддержка 3
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -moz-available
IE Нет поддержки НетOpera Полная поддержка 15
Альтернативное имя
Полная поддержка 15
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Safari Полная поддержка 6.1
Альтернативное имя
Полная поддержка 6.1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
WebView Android Полная поддержка 4.4
Альтернативное имя
Полная поддержка 4.4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Chrome Android Полная поддержка 25
Альтернативное имя
Полная поддержка 25
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Firefox Android Полная поддержка 4
Альтернативное имя
Полная поддержка 4
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -moz-available
Opera Android Полная поддержка 14
Альтернативное имя
Полная поддержка 14
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Safari iOS Полная поддержка 6.1
Альтернативное имя
Полная поддержка 6.1
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Samsung Internet Android Полная поддержка 5.0
Альтернативное имя
Полная поддержка 5.0
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Использует нестандартное имя.
Использует нестандартное имя.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотрите также