Свойство width в CSS

устанавливает ширину элемента

Определяет ширину элемента.

Ширина элемента не включает в себя внутренние отступы padding, внешние отступы margin и рамку border.

Но, если свойство box-sizing установлено border-box, тогда в ширину входит внутренний отступ padding и рамка border.

Свойства min-width и max-width имеют больший приоритет.

По умолчанию ширина блочного элемента равна ширине родителя, а строчного — ширине содержимого.

Примеры

width: 100px;
width: 5em;
width: 50%;
width: auto;

Значения

Значение Описание
auto По умолчанию. Блочный элемент на ширину контейнера, строчный на ширину содержимого.
ширина Фиксированная ширина в единицах измерения (px, em и других).
проценты Ширина в процентах от родительского блока.
inherit Наследует значение родительского блока.
initial Устанавливает значение по умолчанию.

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

НастольныеМобильные
Chrome
Edge
Firefox
IE
Opera
Safari
Chrome
Firefox
Opera
Safari
Samsung
Android
width
1
12
1
4
3.5
1
18
4
10.1
1
1.0
1
Анимируется
26
12
16
11
15
6.1
26
16
14
6.1
1.5
4.4
fill
⚠️ эксперимент.
⚠️ нестандартное
46
79
нет
нет
33
12
46
нет
33
12
5.0
46
fit-content
46
22 -webkit-
1-48intrinsic
79
79 -webkit-
3 -moz-
нет
33
15 -webkit-
15-35intrinsic
11
6.1 -webkit-
2intrinsic
46
25 -webkit-
18-48intrinsic
4 -moz-
33
14 -webkit-
14-35intrinsic
11
7 -webkit-
1intrinsic
5.0
1.5 -webkit-
1.0-5.0intrinsic
46
≤37 -webkit-
1-48intrinsic
fit-content()
нет
нет
нет
нет
нет
нет
нет
нет
нет
нет
нет
нет
max-content
46
22 -webkit-
79
79 -webkit-
66
3 -moz-
нет
44
11
2intrinsic
46
66
4 -moz-
43
11
1intrinsic
5.0
46
min-content
46
1-48min-intrinsic
79
66
3 -moz-
нет
33
15-35min-intrinsic
11
2min-intrinsic
46
18-48min-intrinsic
66
4 -moz-
33
14-35min-intrinsic
11
1min-intrinsic
5.0
1.0-5.0min-intrinsic
46
1-48min-intrinsic
stretch
⚠️ эксперимент.
22-webkit-fill-available
79-webkit-fill-available
3-moz-available
нет
15-webkit-fill-available
6.1-webkit-fill-available
25-webkit-fill-available
4-moz-available
14-webkit-fill-available
6.1-webkit-fill-available
5.0-webkit-fill-available
4.4-webkit-fill-available
Поддерживается: Да Нет Нестандартное имя
Получай полезные материалы удобным способом!
Добавить комментарий