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, не обрізаються і не затуляються іншим вмістом, коли до сторінки застосовується збільшення для укрупнення тексту.

• MDN Розуміння WCAG, Пояснення Настанов 1.4
• Розуміння мірила успіху 1.4.4 | W3C Розуміння WCAG 2.0 (англ.)

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

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

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>

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

Сумісність із браузерами

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

• Блокова модель
• height
• box-sizing
• min-width, max-width
• Відповідні логічні властивості: block-size, inline-size