CSS свойство width устанавливает ширину элемента. Ширина не включает padding, border или margin.
Свойство width применяется ко всем элементам, кроме незаменяемых или строчных элементов, строк и групп строк таблицы (т. е. <thead>, <tfoot> и <tbody>).
Свойство указывается единицами измерения длины (px, pt, em и т. д.), процентами или ключевым словом auto.
Свойство width может быть переопределено свойствами min-width и max-width.
Отрицательные значения длины недопустимы.
Многие значения свойства width, добавленные в спецификацию CSS3, до сих пор являются экспериментальными.
| Значение по умолчанию | auto |
| Применяется | Ко всем элементам. |
| Наследуется | Нет |
| Анимируемое | Да. Ширина элемента анимируема. |
| Версия | CSS1 |
| DOM синтаксис | Object.style.width = "300px"; |
Синтаксис
width: auto | lenght | initial | inherit;Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div {
width: 50%;
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Пример свойства width</h2>
<div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. </div>
</body>
</html>В данном примере ширина текста равна 50%.
В следующем примере ширина первого элемента равна 250px, а ширина второго указана как 25em:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div.t1 {
width: 250px;
border: 1px solid black;
background-color: #1c87c9;
}
div.t2 {
width: 25em;
border: 1px solid black;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Пример свойства width</h2>
<h3>width: 250px</h3>
<div class="t1">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</div>
<h3>width: 25em</h3>
<div class="t2">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| auto | Браузер вычисляет ширину для указанного элемента. Значение по умолчанию. |
| length | Указывает ширину в px, pt, cm и т. д. |
| % | Указывает ширину в процентах. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
|
|
|
|
|---|---|---|---|
| ✓ | 1.0+ | 1.0+ | 3.5+ |
Практикуйте свои знания
Каким образом свойство CSS 'width' влияет на размер элемента?
Правильный!
Неправильно!