CSS свойство width
Определение и применение
CSS свойство width устанавливает ширину области содержимого элемента. Свойства
min-width
и
max-width
могут переопределить ширину.
При box-sizing: content-box размер относится к содержимому; границы и внутренние отступы добавляются
снаружи. При box-sizing: border-box они включены в заданный размер. Внешние отступы не входят в размер в
обоих случаях.
-
Общая ширина элемента вычисляется по формуле:
width(ширина) +padding-left(левый отступ) +padding-right(правый отступ) +border-left(левая граница) +border-right(правая граница). -
Общая высота элемента вычисляется по формуле:
height(ширина) +padding-top(верхний отступ)+padding-bottom(нижний отступ) +border-top(верхняя граница) +border-bottom(нижняя граница).
Попробуйте значения width
Ширина меняется внутри контейнера. При border-box рамка и padding входят в заданную ширину.
width: 80px
HTML и CSS примера
<div class="stage">
<div class="demo-target">Размер блока</div>
</div>
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
padding: 12px;
border: 2px dashed #607589;
background: #edf2f5;
font: 16px/1.4 system-ui;
color: #172c3d;
}
.demo-target {
background: #ffe4bd;
border: 3px solid #245a85;
padding: 12px;
width: 80px;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
padding: 12px;
border: 2px dashed #607589;
background: #edf2f5;
font: 16px/1.4 system-ui;
color: #172c3d;
}
.demo-target {
background: #ffe4bd;
border: 3px solid #245a85;
padding: 12px;
width: 160px;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
padding: 12px;
border: 2px dashed #607589;
background: #edf2f5;
font: 16px/1.4 system-ui;
color: #172c3d;
}
.demo-target {
background: #ffe4bd;
border: 3px solid #245a85;
padding: 12px;
width: 100%;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
padding: 12px;
border: 2px dashed #607589;
background: #edf2f5;
font: 16px/1.4 system-ui;
color: #172c3d;
}
.demo-target {
background: #ffe4bd;
border: 3px solid #245a85;
padding: 12px;
width: auto;
}
Поддержка браузерами
Спецификация: CSS sizing-3
Поддерживается во всех основных браузерах с 2015 года.
Отдельные значения (2) поддерживаются не везде — смотрите таблицу.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
width | 1 | 12 | 1 | 3.5 | 1 | 18 | 4 | 10.1 | 1 | 1.0 | 4.4 | 1 |
anchor-size | 125 | 125 | 147 | 111 | 26 | 125 | 147 | 83 | 26 | 27.0 | 125 | 26 |
auto | 1 | 12 | 1 | 15 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 | 1 |
fit-content | 46 Версия 46 выпущена в 2015 г. Версия 22 выпущена в 2012 г. — Префикс -webkit- Версия 1 выпущена в 2008 г. — Удалено в 48; Имя intrinsic | 79 Версия 79 выпущена в 2020 г. Версия 79 выпущена в 2020 г. — Префикс -webkit- | 94 Версия 94 выпущена в 2021 г. Версия 3 выпущена в 2008 г. — Префикс -moz- | 33 Версия 33 выпущена в 2015 г. Версия 15 выпущена в 2013 г. — Префикс -webkit- Версия 15 выпущена в 2013 г. — Удалено в 35; Имя intrinsic | 11 Версия 11 выпущена в 2017 г. Версия 7 выпущена в 2013 г. — Префикс -webkit- Версия 2 выпущена в 2005 г. — Имя intrinsic | 46 Версия 46 выпущена в 2015 г. Версия 25 выпущена в 2013 г. — Префикс -webkit- Версия 18 выпущена в 2012 г. — Удалено в 48; Имя intrinsic | 94 Версия 94 выпущена в 2021 г. Версия 4 выпущена в 2011 г. — Префикс -moz- | 33 Версия 33 выпущена в 2015 г. Версия 14 выпущена в 2013 г. — Префикс -webkit- Версия 14 выпущена в 2013 г. — Удалено в 35; Имя intrinsic | 11 Версия 11 выпущена в 2017 г. Версия 7 выпущена в 2013 г. — Префикс -webkit- Версия 1 выпущена в 2007 г. — Имя intrinsic | 5.0 Версия 5.0 выпущена в 2016 г. Версия 1.5 выпущена в 2013 г. — Префикс -webkit- Версия 1.0 выпущена в 2013 г. — Удалено в 5.0; Имя intrinsic | 46 Версия 46 выпущена в 2015 г. Версия 4.4 выпущена в 2013 г. — Префикс -webkit- Версия 4.4 выпущена в 2013 г. — Удалено в 48; Имя intrinsic | 11 Версия 11 выпущена в 2017 г. Версия 7 выпущена в 2013 г. — Префикс -webkit- Версия 1 выпущена в 2007 г. — Имя intrinsic |
| fit-content() | 91 Версия 91 выпущена в 2021 г. — Требуется включение флага | |||||||||||
| @keyframe animatable and transitionable | 26 | 12 | 16 | 15 | 7 | 26 | 16 | 14 | 7 | 1.5 | 4.4 | 7 |
max-content | 46 Версия 46 выпущена в 2015 г. Версия 22 выпущена в 2012 г. — Префикс -webkit- | 79 Версия 79 выпущена в 2020 г. Версия 79 выпущена в 2020 г. — Префикс -webkit- | 66 Версия 66 выпущена в 2019 г. Версия 3 выпущена в 2008 г. — Префикс -moz- | 44 | 11 Версия 11 выпущена в 2017 г. Версия 2 выпущена в 2005 г. — Имя intrinsic | 46 Версия 46 выпущена в 2015 г. Версия 25 выпущена в 2013 г. — Префикс -webkit- | 66 Версия 66 выпущена в 2019 г. Версия 4 выпущена в 2011 г. — Префикс -moz- | 43 | 11 Версия 11 выпущена в 2017 г. Версия 1 выпущена в 2007 г. — Имя intrinsic | 5.0 Версия 5.0 выпущена в 2016 г. Версия 1.5 выпущена в 2013 г. — Префикс -webkit- | 46 Версия 46 выпущена в 2015 г. Версия 4.4 выпущена в 2013 г. — Префикс -webkit- | 11 Версия 11 выпущена в 2017 г. Версия 1 выпущена в 2007 г. — Имя intrinsic |
min-content | 46 Версия 46 выпущена в 2015 г. Версия 1 выпущена в 2008 г. — Удалено в 48; Имя min-intrinsic | 79 | 66 Версия 66 выпущена в 2019 г. Версия 3 выпущена в 2008 г. — Префикс -moz- | 33 Версия 33 выпущена в 2015 г. Версия 15 выпущена в 2013 г. — Удалено в 35; Имя min-intrinsic | 11 Версия 11 выпущена в 2017 г. Версия 2 выпущена в 2005 г. — Имя min-intrinsic | 46 Версия 46 выпущена в 2015 г. Версия 18 выпущена в 2012 г. — Удалено в 48; Имя min-intrinsic | 66 Версия 66 выпущена в 2019 г. Версия 4 выпущена в 2011 г. — Префикс -moz- | 33 Версия 33 выпущена в 2015 г. Версия 14 выпущена в 2013 г. — Удалено в 35; Имя min-intrinsic | 11 Версия 11 выпущена в 2017 г. Версия 1 выпущена в 2007 г. — Имя min-intrinsic | 5.0 Версия 5.0 выпущена в 2016 г. Версия 1.0 выпущена в 2013 г. — Удалено в 5.0; Имя min-intrinsic | 46 Версия 46 выпущена в 2015 г. Версия 4.4 выпущена в 2013 г. — Удалено в 48; Имя min-intrinsic | 11 Версия 11 выпущена в 2017 г. Версия 1 выпущена в 2007 г. — Имя min-intrinsic |
stretch | 138 Версия 138 выпущена в 2025 г. Версия 22 выпущена в 2012 г. — Имя -webkit-fill-available | 138 Версия 138 выпущена в 2025 г. Версия 79 выпущена в 2020 г. — Имя -webkit-fill-available | 146 Версия 146 выпущена в 2025 г. — Имя -webkit-fill-available | 122 Версия 122 выпущена в 2025 г. Версия 15 выпущена в 2013 г. — Имя -webkit-fill-available | 27 Версия 27 выпущена в 2026 г. Версия 7 выпущена в 2013 г. — Имя -webkit-fill-available | 138 Версия 138 выпущена в 2025 г. Версия 25 выпущена в 2013 г. — Имя -webkit-fill-available | 146 Версия 146 выпущена в 2025 г. — Имя -webkit-fill-available | 91 Версия 91 выпущена в 2025 г. Версия 14 выпущена в 2013 г. — Имя -webkit-fill-available | 27 Версия 27 выпущена в 2026 г. Версия 7 выпущена в 2013 г. — Имя -webkit-fill-available | 5.0 Версия 5.0 выпущена в 2016 г. — Имя -webkit-fill-available | 138 Версия 138 выпущена в 2025 г. Версия 4.4 выпущена в 2013 г. — Имя -webkit-fill-available | 27 Версия 27 выпущена в 2026 г. Версия 7 выпущена в 2013 г. — Имя -webkit-fill-available |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
CSS синтаксис:
width: auto | <length-percentage [0,∞]> |
min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) |
<calc-size()> | <anchor-size()> | stretch;
/* Глобальные значения */
width: initial | inherit | unset | revert | revert-layer;
| — выбор варианта; [ ] — группа, а внутри типа — допустимый диапазон; ∞ —
отсутствие верхней границы.
JavaScript синтаксис:
element.style.width = "10%";Начальное значение свойства
auto.
Значения свойства
| Значение | Описание |
|---|---|
auto |
Браузер вычисляет ширину самостоятельно. Начальное значение. |
length |
Определяет ширину в пикселях, см и др. |
% |
Определяет ширину в процентах от содержащего блока родительского элемента. |
min-content |
Внутренний минимальный размер по содержимому с использованием допустимых переносов. |
max-content |
Внутренний предпочтительный размер содержимого без необязательных переносов. |
fit-content |
Размер ограничивается доступным пространством и внутренними размерами min-content и
max-content. Функция fit-content() задаёт явный предел длиной или процентом; её поддержка зависит
от свойства.
|
stretch |
Растягивает внешний размер элемента до доступного размера содержащего блока с учётом внешних отступов. Поддержку этого значения проверяйте отдельно. |
calc-size() |
Вычисление на основе внутреннего размера, например calc-size(auto, size + 20px). Экспериментальная возможность; поддержку проверяйте отдельно. |
anchor-size() |
Размер якорного элемента, например anchor-size(width). Требует подходящего якоря; поддержку проверяйте отдельно. |
initial
|
Устанавливает начальное значение свойства. |
inherit
|
Наследует вычисленное значение свойства у родительского элемента. |
unset |
Для ненаследуемого свойства width устанавливает его
начальное значение.
|
revert |
Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS. |
revert-layer |
Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя
по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.
|
Спецификация
CSS Box Sizing — спецификация width.
Наследуется
Нет.
Анимируемое
Да, по вычисленному значению: совместимые числовые значения интерполируются плавно. Переход между несовместимыми типами или ключевыми словами может быть дискретным.
Примеры, попробуйте сами
Ширина блока
Сравните фиксированные 120px и 80% ширины родителя. Измените 80% на 50%, затем растяните окно: процентная ширина зависит от доступного места.
base.css
* {
box-sizing: border-box;
}
body {
margin: 16px;
font:
16px/1.4 system-ui,
sans-serif;
color: #172c3d;
}
.comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
gap: 24px;
}
section {
min-width: 0;
}
h3 {
margin: 0 0 12px;
font-size: 16px;
}
.stage {
background: #f1f4f7;
outline: 1px dashed #8495a5;
}
.sample {
background: #c5dbea;
padding: 8px;
overflow-wrap: anywhere;
}
index.html
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Ширина блока</title>
</head>
<body>
<div class="comparison">
<section>
<h3>Вариант A</h3>
<div class="stage"><div class="sample first">Текст</div></div>
</section>
<section>
<h3>Вариант B</h3>
<div class="stage"><div class="sample second">Текст</div></div>
</section>
</div>
</body>
</html>
style.css
.first {
width: 120px;
}
.second {
width: 80%;
}