width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

Синтаксис

css
/* Ключевые слова */
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 указывается как:

Значения

<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()>                           

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

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

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

Примеры

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

css
p.goldie {
  background: gold;
}
html
<p class="goldie">Сообщество Mozilla производит множество отличного ПО.</p>

Пиксели и em

css
.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;
}
html
<div class="px_length">Ширина в пикселях</div>
<div class="em_length">Ширина в em</div>

Проценты

css
.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
html
<div class="percent">Ширина в процентах</div>

max-content

css
p.maxgreen {
  background: lightgreen;
  width: intrinsic; /* Safari/WebKit используют нестандартное имя */
  width: -moz-max-content; /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}
html
<p class="maxgreen">Сообщество Mozilla производит множество отличного ПО.</p>

min-content

css
p.minblue {
  background: lightblue;
  width: -moz-min-content; /* Firefox */
  width: -webkit-min-content; /* Chrome */
}
html
<p class="minblue">Сообщество Mozilla производит множество отличного ПО.</p>

Проблемы доступности

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

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

Specification
CSS Box Sizing Module Level 4
# width-height-keywords
CSS Box Sizing Module Level 4
# sizing-values

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

BCD tables only load in the browser

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