width
Властивість CSS width
(ширина) встановлює ширину елемента. Усталено вона встановлює ширину області вмісту, однак якщо властивість box-sizing
має значення border-box
, то вказане значення стає шириною відмежованої області.
Спробуйте його в дії
Властивості min-width
та max-width
зневажають width
.
Синтаксис
/* Значення <length> */
width: 300px;
width: 25em;
/* Значення <percentage> */
width: 75%;
/* Значення – ключові слова */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;
/* Глобальні значення */
width: inherit;
width: initial;
width: revert;
width: revert-layer;
width: unset;
Значення
<length>
Визначає ширину у вигляді абсолютного значення.
<percentage>
Визначає ширину у вигляді відсотків від ширини контейнерного блока.
auto
(автоматично)Браузер обчислить та обере ширину для обраного елемента.
max-content
(максимальний вміст)Внутрішньо бажана ширина.
min-content
(мінімальний вміст)Внутрішньо найменша можлива ширина.
fit-content(<a href="/uk/docs/Web/CSS/length-percentage"><code><length-percentage></code></a>)
(припасувати вміст)Використовує формулу fit-content щодо доступного простору, заміненого вказаним аргументом, тобто
min(max-content, max(min-content, <length-percentage>))
.
Занепокоєння щодо доступності
Слід пересвідчитись, що елементи, для котрих вказана width
, не обрізаються і не затуляються іншим вмістом, коли до сторінки застосовується збільшення для укрупнення тексту.
- MDN Розуміння WCAG, Пояснення Настанов 1.4
- Розуміння мірила успіху 1.4.4 | W3C Розуміння WCAG 2.0 (англ.)
Формальне визначення
Початкове значення | auto |
---|---|
Успадковується | ні |
Обчислене значення | a percentage or auto or the absolute length |
Формальний синтаксис
auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)де
<length-percentage> = <length> | <percentage>
Приклади
Усталена ширина
p.goldie {
background: gold;
}
<p class="goldie">Спільнота Mozilla виробляє чимало чудового ПЗ.</p>
Приклад із пікселями та емами
.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">Ширина, вказана у px</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 */
width: max-content;
}
<p class="maxgreen">Спільнота Mozilla виробляє чимало чудового ПЗ.</p>
Приклад із min-content
p.minblue {
background: lightblue;
width: -moz-min-content; /* Firefox */
width: -webkit-min-content; /* Chrome */
width: min-content;
}
<p class="minblue">Спільнота Mozilla виробляє чимало чудового ПЗ.</p>
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
width
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 4 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 10.1 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
Animatable
|
Chrome Full support 26 | Edge Full support 12 | Firefox Full support 16 | Internet Explorer Full support 11 | Opera Full support 15 | Safari Full support 7 | WebView Android Full support 4.4 | Chrome Android Full support 26 | Firefox for Android Full support 16 | Opera Android Full support 14 | Safari on iOS Full support 7 | Samsung Internet Full support 1.5 |
fill
|
Chrome Full support 46 | Edge Full support 79 | Firefox No support No | Internet Explorer No support No | Opera Full support 33 | Safari Full support 12 | WebView Android Full support 46 | Chrome Android Full support 46 | Firefox for Android No support No | Opera Android Full support 33 | Safari on iOS Full support 12 | Samsung Internet Full support 5.0 |
fit-content
|
Chrome Full support 46 | Edge Full support 79 | Firefox Full support 3 | Internet Explorer No support No | Opera Full support 33 | Safari Full support 11 | WebView Android Full support 46 | Chrome Android Full support 46 | Firefox for Android Full support 4 | Opera Android Full support 33 | Safari on iOS Full support 11 | Samsung Internet Full support 5.0 |
fit-content()
|
Chrome No support No | Edge No support No | Firefox Full support 91 | Internet Explorer No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox for Android No support No | Opera Android No support No | Safari on iOS No support No | Samsung Internet No support No |
max-content
|
Chrome Full support 46 | Edge Full support 79 | Firefox Full support 66 | Internet Explorer No support No | Opera Full support 44 | Safari Full support 11 | WebView Android Full support 46 | Chrome Android Full support 46 | Firefox for Android Full support 66 | Opera Android Full support 43 | Safari on iOS Full support 11 | Samsung Internet Full support 5.0 |
min-content
|
Chrome Full support 46 | Edge Full support 79 | Firefox Full support 66 | Internet Explorer No support No | Opera Full support 33 | Safari Full support 11 | WebView Android Full support 46 | Chrome Android Full support 46 | Firefox for Android Full support 66 | Opera Android Full support 33 | Safari on iOS Full support 11 | Samsung Internet Full support 5.0 |
stretch
|
Chrome Full support 22 | Edge Full support 79 | Firefox Full support 3 | Internet Explorer No support No | Opera Full support 15 | Safari Full support 7 | WebView Android Full support 4.4 | Chrome Android Full support 25 | Firefox for Android Full support 4 | Opera Android Full support 14 | Safari on iOS Full support 7 | Samsung Internet Full support 5.0 |
Дивіться також
- Блокова модель
height
box-sizing
min-width
,max-width
- Відповідні логічні властивості:
block-size
,inline-size