Свойство width: ширина элемента
Как выбрать фиксированную, относительную или автоматическую ширину блока.
Как это работает
width задаёт предпочтительную ширину элемента, но итог ограничивается min-width, max-width и правилами раскладки. У обычного блочного элемента auto часто позволяет занять доступное пространство. Процент зависит от ширины содержащего блока.
Фиксированная ширина удобна для небольших контролов, но основной макет должен учитывать узкие экраны. Вместо безусловных 900px часто подходит width: 100% вместе с max-width. Проверьте box-sizing, чтобы рамки и padding не создали неожиданную прибавку.
Пример в интерфейсе
.box { width: 100%; max-width: 420px; box-sizing: border-box; padding: 20px; background: #eaf4ee; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| auto | Расчёт по правилам текущей раскладки. |
| 100% | Относительно содержащего блока. |
| 320px | Заданная CSS-ширина. |
| min-content / max-content | Размеры, связанные с содержимым. |
На что обратить внимание
width: 100vw может учитывать ширину области с полосой прокрутки и давать лишнее горизонтальное переполнение. Для обычного блока начните с width: 100%.
Проверьте на практике
Замените width: 100% на 420px и сузьте окно. Затем восстановите адаптивный вариант и проверьте перенос текста.
Связанные темы: max-width, box-sizing.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.