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