width

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

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: #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 class="goldie">Сообщество 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 class="px_length">Ширина в пикселях</div> <div class="em_length">Ширина в em</div> 

Проценты

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

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

max-content

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

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

min-content

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

<p class="minblue">Сообщество 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