CSS Box-sizing - Размер блока
CSS Размер блока
CSS свойство box-sizing позволяет включать отступы и границы в общую ширину и высоту элемента.
Без CSS свойства box-sizing
По умолчанию ширина и высота элемента рассчитывается следующим образом:
width + padding + border = фактическая ширина элемента
height + padding + border = фактическая высота элемента
Это означает, что когда вы устанавливаете ширину / высоту элемента, элемент часто кажется больше, чем вы установили (потому что граница и отступ элемента добавляются к указанной ширине / высоте элемента).
На следующем рисунке показаны два элемента <div> с одинаковыми заданными шириной и высотой:
Два элемента <div> приведенные выше, в результате имеют разные размеры (потому что у div2 задан отступ):
Пример
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Попробуйте сами »
Свойство box-sizing решает эту проблему.
Из CSS свойством box-sizing
Свойство box-sizing позволяет нам включать отступы и границы в общую ширину и высоту элемента.
Если вы установили box-sizing: border-box; для элементов отступ и границы включаются в ширину и высоту:
Вот тот же пример, что и выше, с box-sizing: border-box; добавлен в оба элемента <div>:
Пример
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Попробуйте сами »
Поскольку результат использования box-sizing: border-box; намного лучше, многие разработчики хотят, чтобы все элементы на их страницах работали таким образом.
Приведенный ниже код гарантирует, что все элементы будут иметь более удобный размер. Многие браузеры уже используют box-sizing: border-box; для многих элементов формы (но не для всех - поэтому входные и текстовые области выглядят по-разному по width: 100%;).
Применять это ко всем элементам безопасно и разумно:
CSS свойство box-sizing
| Свойство | Описание |
|---|---|
| box-sizing | Определяет, как рассчитываются ширина и высота элемента: должны ли они содержать отступы и границы или нет |
