width
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство width устанавливает ширину области содержимого элемента.
Если содержимое превышает заданную ширину области содержимого, оно будет выходить за границу элемента, например слишком длинное слово или слишком большое изображение. Для того, чтобы содержимое оставалось в пределах границ элемента, можно воспользоваться свойством overflow или overflow-x, в этом случае, если содержимое будет превышать заданную ширину, появится полоса прокрутки. Чтобы визуально увидеть, когда содержимое выходит за границу элемента, можно к примеру установить фон или рамку для элемента.
Общая ширина элемента вычисляется по формуле: width + padding (левый и правый) + border (левый и правый). Например, если вы зададите: width: 500px, padding: 5px, border 1px, то общая ширина элемента получится 512px.
Примечание: свойство width работает только с блочными элементами.
| Значение по умолчанию: | auto |
|---|---|
| Применяется: | ко всем элементам, кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.width="50px" |
Синтаксис
width: auto|величина|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| auto | Значение auto означает, что область содержимого будет автоматически растянута по ширине ровно на столько, сколько есть свободного места. |
| величина | Определяет ширину в единицах измерения CSS. |
| % | Ширина указывается в процентах и высчитывается в зависимости от ширины области содержимого родительского элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
p.ex { width: 300px; }
</style>
</head>
<body>
<p class="ex">Открыв глаза, он понял, что все еще находится в лесу, поблизости
никого уже не было, даже чувство тревоги пропало. И только полностью осознав
что произошло, он наконец-то понял причину нападения и осознал, как много у него
украли за прошедшие мгновения его жизни.</p>
</body>
</html>
Результат данного примера в окне браузера:
