width
=====

Свойство 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` указывается как:

* одно из следующих ключевых слов: `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                                      | (en-US)  
  <length-percentage [0,∞]>                 | (en-US)  
  min-content                               | (en-US)  
  max-content                               | (en-US)  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      | (en-US)  
  <percentage>    
  
```

Примеры
-------

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


```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` не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0
Спецификации
------------

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

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | все элементы, кроме незаменяемых строчных элементов, табличных строк и групп строк |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, `auto` или абсолютная длина |
| Animation type | длина, проценты или calc(); |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

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