CSS-свойство `width`

Свойство width CSS задаёт ширину элемента. По умолчанию оно задаёт ширину области содержимого, но если для box-sizing задано значение border-box, оно задаёт ширину области границы.

Попробуйте

width: 150px;

width: 20em;

width: 75%;

width: auto;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box where you can change the width.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  height: 80%;
  justify-content: center;
  color: white;
}

Заданное значение width применяется к области содержимого, пока оно находится в пределах значений, определённых свойствами min-width и max-width.

• Если значение width меньше значения min-width, то min-width переопределяет width.
• Если значение width больше значения max-width, то max-width переопределяет width.

Синтаксис

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: max-content;
width: min-content;
width: fit-content;
width: auto;
width: stretch;

/* function values */
width: fit-content(20em);
width: anchor-size(width);
width: anchor-size(--my-anchor inline, 120%);
width: calc-size(max-content, size / 2);

/* Global values */
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)).

anchor-size()

Задаёт ширину относительно размера якорного элемента. При задании width элемента, позиционируемого относительно якоря, первый параметр по умолчанию равен ширине связанного якоря. Если функция применена к элементу, не позиционируемому относительно якоря, она задаёт ширину, равную резервному значению. Если резервное значение не определено, объявление игнорируется.

calc-size()

Задаёт ширину как изменённый внутренний размер.

fit-content(<length-percentage>)

Использует формулу fit-content, подставляя указанный аргумент вместо доступного пространства и ограничивая ширину согласно формуле min(maximum size, max(minimum size, <length-percentage>)).

stretch

Задаёт ширину блока отступов элемента равной ширине его содержащего блока. При этом блок отступов заполняет доступное пространство в содержащем блоке. В некотором смысле это работает подобно 100%, но полученный размер применяется к блоку отступов, а не к блоку, размер которого определяется свойством box-sizing.

Доступность

Убедитесь, что элементы с заданным width не обрезаются и/или не перекрывают другое содержимое при увеличении масштаба страницы для повышения размера текста.

• Пояснения MDN к руководству WCAG, пункт 1.4

• [Понимание критерия успеха 1.4.4

  W3C: понимание WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)

Формальное определение

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

width = 
  auto |
  <length-percentage [0,∞]> |
  min-content |
  max-content |
  fit-content |
  fit-content(<length-percentage [0,∞]>) |
  <calc-size()> |
  <anchor-size()>

<length-percentage> = 
  <length> |
  <percentage>

<calc-size()> = 
  calc-size( <calc-size-basis>, <calc-sum> )

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<calc-size-basis> = 
  <intrinsic-size-keyword> |
  <calc-size()> |
  any |
  <calc-sum>

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*

<anchor-name> = 
  <dashed-ident>

<anchor-size> = 
  width |
  height |
  block |
  inline |
  self-block |
  self-inline

<calc-product> = 
  <calc-value> [ '*' <calc-value> | '/' <number> ]*

<calc-value> = 
  <number> |
  <dimension> |
  <percentage> |
  <calc-constant> |
  ( <calc-sum> )

<calc-constant> = 
  e |
  pi |
  infinity |
  -infinity |
  NaN

Примеры

Ширина по умолчанию

В этом примере показано базовое использование и значение auto по умолчанию.

HTML

Добавим два абзаца, один из которых будет иметь имя класса.

<p>The MDN community writes really great documentation.</p>
<p class="has-width">The MDN community writes really great documentation.</p>

CSS

Зададим всем абзацам золотистый фон, а для второго абзаца явно установим width в значение auto.

p {
  background: gold;
}
p.has-width {
  width: auto;
}

Результат

Поскольку по умолчанию width имеет значение auto, ширина обоих абзацев одинакова.

Использование единиц длины

В этом примере показаны значения ширины, заданные в единицах длины.

HTML

Добавим два элемента <div> с текстом.

<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>

CSS

Для элемента px_length зададим значение 200px, а для элемента em_length — ширину 20em. Кроме того, зададим обоим элементам разные значения background-color, color и border>, чтобы их можно было различить при отображении.

.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> с текстом.

<div class="percent">Width in percentage</div>

CSS

Зададим width элемента равным 20% ширины его родительского контейнера.

.percent {
  width: 20%;

  background-color: silver;
  border: 1px solid red;
}

Результат

Использование внутренних размеров

В этом примере сравниваются max-content и min-content, а также рассматривается calc-size.

HTML

Добавим три абзаца с одинаковым содержимым, различающиеся только именами классов.

<p class="max-green">The MDN community writes really great documentation.</p>
<p class="min-blue">The MDN community writes really great documentation.</p>
<p class="min-pink">The MDN community writes really great documentation.</p>

CSS

Для width одного абзаца зададим значение max-content, для второго — min-content, а ширину третьего сделаем вдвое больше min-content с помощью функции calc-size(). Чтобы различать элементы, зададим каждому разные значения background-color и border-style.

p.max-green {
  width: max-content;

  background-color: lightgreen;
  border-style: dotted;
}

p.min-blue {
  width: min-content;

  background-color: lightblue;
  border-style: dashed;
}

p.min-pink {
  width: calc-size(min-content, size * 2);

  background-color: pink;
  border-style: solid;
}

@supports not (width: calc-size(min-content, size * 2)) {
  body::before {
    content: "Your browser doesn't support the calc-size() function yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Результат

В примере max-content ширина равна ширине текста. В примере min-content ширина равна ширине самого длинного слова. В примере calc-size() ширина вдвое больше min-content.

Использование ключевого слова stretch

В этом примере показано значение stretch внутри контейнера flex.

HTML

Добавим родительский контейнер с двумя дочерними элементами.

<div class="parent">
  <div class="child">text</div>
  <div class="child stretch">stretch</div>
</div>

CSS

Используем свойство display, чтобы сделать родительский элемент flex-контейнером, и зададим для width второго дочернего элемента значение stretch.

.parent {
  border: solid;
  margin: 1rem;
  display: flex;
}

.child {
  background: #00999999;
  margin: 1rem;
}

.stretch {
  width: stretch;
}

@supports not (width: stretch) {
  body::before {
    content: "Your browser doesn't support the stretch value yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Результат

По умолчанию ширина flex-элементов равна ширине их содержимого. Значение stretch позволяет элементу занять всю доступную ширину, при этом блок отступов элемента ограничивается шириной содержащего блока.

Использование функции anchor-size()

В этом примере показано использование функции anchor-size() для задания ширины элемента, позиционируемого относительно якоря; его ширина задана как кратное высоте якоря.

HTML

Добавим два элемента <div>: элемент anchor и элемент infobox, который мы позиционируем относительно якоря.

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>Infobox.</p>
</div>

CSS

Объявим элемент anchor <div> якорным, задав ему anchor-name. Для позиционируемого элемента зададим свойству position значение absolute и свяжем его с якорным элементом с помощью свойства position-anchor. Также зададим якорю абсолютные размеры height и width и определим ширину позиционируемого относительно якоря элемента равной ширине якоря, используя функцию anchor-size() в качестве значения свойства width. В дополнение зададим с помощью функции anchor-size() положение информационного блока по left, чтобы расстояние между якорем и информационным блоком составляло четверть высоты якоря.

.anchor {
  anchor-name: --my-anchor;
  width: 120px;
  height: 60px;

  font-size: 2rem;
  background-color: lightpink;
  text-align: center;
  align-content: center;
  outline: 1px solid black;
}

.infobox {
  position-anchor: --my-anchor;
  position: absolute;
  position-area: right;
  width: anchor-size(width);

  left: calc( anchor-size(height) / 4 )

  align-content: center;
  color: darkblue;
  background-color: azure;
  outline: 1px solid #dddddd;
}

body {
  padding: 5em;
}

@supports not (width: anchor-size(width)) {
  body::before {
    content: "Your browser doesn't support the anchor-size() function value.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Результат

Обратите внимание: ширина информационного блока всегда совпадает с шириной якорного элемента.

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

Совместимость с браузерами

См. также

• height
• box-sizing
• min-width, max-width
• block-size, inline-size
• Атрибут SVG width
• Руководство «Введение в блочную модель CSS»
• Модуль «Блочная модель CSS»
• Модуль «Позиционирование относительно якорей в CSS»
• Модуль «Значения и единицы CSS»