Свойство CSS width
Свойство CSS width задаёт ширину элемента. Попробуйте примеры с каждым значением этого свойства.
Свойство CSS width задаёт ширину области содержимого элемента — внутреннего блока, в котором располагаются текст и дочерние элементы. По умолчанию эта ширина не включает border, padding и margin: они добавляются снаружи, поэтому итоговая отрисованная ширина элемента равна width + padding + border.
На этой странице рассказывается, что измеряет width, какие значения оно принимает (включая современные intrinsic-ключевые слова min-content, max-content и fit-content), как разрешаются проценты, и о чём чаще всего забывают новички при работе с блочной моделью.
Как width взаимодействует с блочной моделью
То, что именно измеряет width, зависит от свойства box-sizing:
content-box(значение по умолчанию) —widthзадаёт размер только области содержимого. Padding и border добавляются снаружи. Блок сwidth: 200px; padding: 20px; border: 5px solidотрисовывается шириной 250px.border-box—widthзадаёт размер содержимого, padding и border вместе. Те же объявления дают ровно 200px ширины, а область содержимого уменьшается, чтобы освободить место.
Поскольку border-box делает размеры элементов предсказуемыми, многие таблицы стилей устанавливают его глобально:
*,
*::before,
*::after {
box-sizing: border-box;
}К каким элементам применяется width
Свойство width применяется ко всем элементам кроме незамещаемых строчных элементов (например, обычного <span>), строк таблицы и групп строк (то есть <thead>, <tfoot> и <tbody>). Чтобы задать ширину строчному элементу, сначала установите display: inline-block или display: block.
Свойство принимает CSS-длину (px, pt, em и т. д.), процент или ключевое слово, например auto или max-content.
Процент вычисляется относительно ширины родительского элемента (содержащего блока). Для абсолютно позиционированных элементов процент рассчитывается относительно ширины padding-блока содержащего блока.
Свойство width может быть переопределено свойствами min-width и max-width: значение max-width, меньшее чем width, будет иметь приоритет, как и значение min-width, большее чем width. Смежным свойством является height.
Отрицательные значения длины недопустимы.
| Начальное значение | auto |
|---|---|
| Применяется к | Всем элементам, кроме незамещаемых строчных элементов, строк таблицы и групп строк. |
| Наследуется | Нет. |
| Анимируется | Да. Ширина элемента поддерживает анимацию. |
| Версия | CSS1 |
| DOM Syntax | Object.style.width = "300px"; |
Синтаксис
Синтаксис свойства CSS width
width: auto | length | percentage | initial | inherit | fit-content | min-content | max-content | stretch;Пример свойства width со значением "%":
Пример свойства CSS width со значением %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 50%;
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Width property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Результат
В приведённом примере ширина контейнера div составляет 50% — половину ширины его родителя (в данном случае <body>).
В следующем примере ширина первого элемента равна 250px, а второго — 25em:
Пример свойства width со значениями "px" и "em":
Пример свойства CSS width со значениями px и em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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 property example</h2>
<h3>width: 250px</h3>
<div class="t1">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>width: 25em</h3>
<div class="t2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Ключевые слова для внутреннего размера
Помимо фиксированных длин и процентов, width принимает ключевые слова, которые размещают элемент по размеру его содержимого, а не по размеру контейнера:
max-content— ширина, которую хочет занять содержимое, если оно никогда не переносится. Для параграфа это весь текст в одну строку.min-content— минимальная ширина без переполнения, то есть ширина самого длинного неразрывного слова.fit-content— растёт вместе с содержимым, какmax-content, но никогда не превышает доступное пространство, поэтому перенос происходит при достижении края контейнера. Идеально подходит для блоков типа «сжать до размера содержимого», например кнопок или бейджей.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
margin-bottom: 10px;
padding: 5px;
}
.min { width: min-content; }
.max { width: max-content; }
.fit { width: fit-content; }
</style>
</head>
<body>
<div class="min">width: min-content</div>
<div class="max">width: max-content</div>
<div class="fit">width: fit-content</div>
</body>
</html>Блок min-content такой же узкий, как самое длинное слово, блок max-content растягивается на всю строку, а блок fit-content находится между ними в зависимости от доступного пространства.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| auto | Браузер вычислит ширину для указанного элемента. Это значение по умолчанию. | Попробовать » |
| length | Задаёт ширину в px, pt, cm и т. д. | Попробовать » |
| percentage | Задаёт ширину в процентах от содержащего элемента. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. | |
| fit-content | Вычисляет ширину на основе внутреннего размера содержимого. | Попробовать » |
| min-content | Вычисляет ширину на основе минимального размера содержимого. | Попробовать » |
| max-content | Вычисляет ширину на основе максимального размера содержимого. | Попробовать » |
| stretch | Растягивает элемент для заполнения контейнера. | Попробовать » |
Распространённые ошибки
- Процентная ширина без определённой ширины родителя. Если ширина родителя равна
auto, процент может разрешиться не так, как вы ожидаете. Задайте содержащему блоку явную ширину (или используйте естественную полную ширину блочного элемента). - Padding и border нарушают компоновку. При стандартной модели
content-boxдобавление padding к элементу шириной 100% вызывает его выход за пределы родителя. Переключитесь наbox-sizing: border-box, чтобы итоговая ширина оставалась равной 100%. widthдля строчных элементов игнорируется. Сначала установитеdisplay: inline-blockилиblock.- Адаптивность. Для жидких макетов предпочтительнее использовать
max-widthвместо фиксированногоwidth:max-width: 600pxпозволяет блоку сжиматься на малых экранах, ограничивая его на больших.