Свойство CSSwidth устанавливает ширину элемента. По умолчанию она равняется шириневнутренней области, но еслиbox-sizing имеет значениеborder-box, то она будет равняться ширинеобласти рамки.

Интерактивный пример

width: 150px;

width: 20em;

width: 75%;

width: auto;

<section>  <div>    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: #ffffff;}

Свойстваmin-width иmax-width перекрываютwidth.

Синтаксис

/* Ключевые слова */width: 25em border-box;width: 75% content-box;width: max-content;width: min-content;width: available;width: fit-content;width: auto;/* <length> значения */width: 300px;width: 25em;/* <percentage> значения */width: 75%;/* Глобальные значения */width: inherit;width: initial;width: unset;

Свойствоwidth указывается как:

• одно из следующих ключевых слов:available,min-content,max-content,fit-content,auto.
• <length> или<percentage>. За ними так же могут быть указаны одни из следующих ключевых слов:border-box,content-box.

Значения

<length>

Ширина - фиксированная величина.

<percentage>

Ширина в процентах - размер относительно ширины родительского блока.

border-boxЭкспериментальная возможность

Если присутствует, то предшествующие<length> или<percentage> применяются к области рамки элемента.

content-boxЭкспериментальная возможность

Если присутствует, то предшествующие<length> или<percentage> применяются к внутренней области элемента.

auto

Браузер рассчитает и выберет ширину для указанного элемента.

fillЭкспериментальная возможность

Используетfill-available размер строки илиfill-available размер блока, в зависимости от способа разметки.

max-contentЭкспериментальная возможность

Внутренняя максимальная предпочтительная ширина.

min-contentЭкспериментальная возможность

Внутренняя минимальная ширина.

availableЭкспериментальная возможность

Ширина содержащего блока минус горизонтальныеmargin,border иpadding.

fit-contentЭкспериментальная возможность

Наибольшее из:

• внутренняя минимальная ширина
• меньшая из внутренней предпочтительной ширины и доступной ширины

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

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

<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> =
<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>]*

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

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

Примеры

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

p.goldie {  background: gold;}

<p>Сообщество Mozilla производит множество отличного ПО.</p>

Пиксели и em

.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><div>Ширина в em</div>

Проценты

.percent {  width: 20%;  background-color: silver;  border: 1px solid red;}

<div>Ширина в процентах</div>

max-content

p.maxgreen {  background: lightgreen;  width: intrinsic; /* Safari/WebKit используют нестандартное имя */  width: -moz-max-content; /* Firefox/Gecko */  width: -webkit-max-content; /* Chrome */}

<p>Сообщество Mozilla производит множество отличного ПО.</p>

min-content

p.minblue {  background: lightblue;  width: -moz-min-content; /* Firefox */  width: -webkit-min-content; /* Chrome */}

<p>Сообщество Mozilla производит множество отличного ПО.</p>

Доступность

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

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0

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

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

Смотрите также

• Блочная модель,height,box-sizing,min-width,max-width