width

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

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

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

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

[!NOTE] Як геометрична властивість, width також застосовується до елементів SVG <svg>, <rect>, <image> і <foreignObject>, причому auto вирішується як 100% для <svg> і як 0 для інших елементів, а відсоткові значення відносні щодо ширини області перегляду SVG для <rect>. Значення властивості CSS width перемагає значення атрибута SVG width, якщо на елементі SVG такий задано.

Синтаксис

/* Значення <length> */
width: 300px;
width: 25em;
width: anchor-size(--myAnchor inline, 120%);
width: minmax(100px, anchor-size(width));

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

/* Значення – ключові слова */
width: max-content;
width: min-content;
width: fit-content;
width: fit-content(20em);
width: auto;
width: stretch;

/* Глобальні значення */
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>)).

stretch

Задає ширині рамки зовнішніх відступів елемента ширину його контейнерного блока. Намагається змусити рамку зовнішніх відступів заповнити доступний у контейнерному блоці простір так, щоб це вийшло схоже на 100%, але застосовуючи результівний розмір до рамки зовнішніх відступів, а не рамки, визначеної box-sizing.

[!NOTE] Аби перевірити псевдоніми значення stretch, що використовуються браузерами, та статус реалізації цього значення, дивіться наш розділ Сумісності з браузерами.

Доступність

Слід пересвідчитись, що елементи, для котрих вказана 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">Спільнота MDN пише справді добру документацію.</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.max-green {
  background: lightgreen;
  width: max-content;
}

<p class="max-green">Спільнота MDN пише справді добру документацію.</p>

Приклад із min-content

p.min-blue {
  background: lightblue;
  width: min-content;
}

<p class="min-blue">Спільнота MDN пише справді добру документацію.</p>

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

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

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

• height
• box-sizing
• min-width, max-width
• block-size, inline-size
• anchor-size()
• Вступ у Базову рамкову модель CSS
• Модуль Рамкової моделі CSS