width

Властивість CSS width (ширина) встановлює ширину елемента. Усталено вона встановлює ширину області вмісту, однак якщо властивість box-sizing має значення border-box, то вказане значення стає шириною відмежованої області.

Спробуйте його в дії

Задане значення width застосовується до області вмісту, поки воно залишається в межах значень, заданих властивостями min-width і max-width.

  • Якщо значення width менше за значення min-width, то min-width відкидає width.
  • Якщо значення width більше за значення max-width, то max-width відкидає width.

Синтаксис

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

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

/* Значення – ключові слова */
width: max-content;
width: min-content;
width: fit-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

Використовує доступний простір, але не більше, ніж max-content, тобто min(max-content, max(min-content, stretch)).

fit-content(<a href="/uk/docs/Web/CSS/length-percentage"><code>&lt;length-percentage&gt;</code></a>)

Використовує формулу fit-content щодо доступного простору, заміненого вказаним аргументом, тобто min(max-content, max(min-content, <length-percentage>)).

Занепокоєння щодо доступності

Слід пересвідчитись, що елементи, для котрих вказана width, не обрізаються і не затуляються іншим вмістом, коли до сторінки застосовується збільшення для укрупнення тексту.

Формальне визначення

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

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
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
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
Non-standard
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
prefix
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
prefix
Opera Android Full support 33
Safari on iOS Full support 11
Samsung Internet Full support 5.0
fit-content()
Experimental
Chrome No support No
Edge No support No
Firefox Full support 91
disabled
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
Experimental
Chrome Full support 22
altname
Edge Full support 79
altname
Firefox Full support 3
altname
Internet Explorer No support No
Opera Full support 15
altname
Safari Full support 7
altname
WebView Android Full support 4.4
altname
Chrome Android Full support 25
altname
Firefox for Android Full support 4
altname
Opera Android Full support 14
altname
Safari on iOS Full support 7
altname
Samsung Internet Full support 5.0
altname

Дивіться також