CSS Размеры боксов
CSS3 Свойство box-sizing
Свойство box-sizing позволяет включать отступ и границу в общую ширину и высоту элементов.
Без свойства box-sizing
По умолчанию ширина и высота элемента вычисляется так:
ширина + отступ + граница = фактическая ширина элемента
высота + отступ + граница = фактическая высота элемента
Это означает: когда вы устанавливаете ширину/высоту элемента, элемент будет больше, чем вы установили (потому что граница элемента и заполнение добавляются в указанной ширине/высоте элемента).
На следующем рисунке показаны два элемента <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 решает эту проблема.
С свойством 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; для
многих элементов формы (но не все - поэтому входы и текст выглядят одинакого по ширине: 100 пикселей;).
Применение этого ко всем элементам безопасно и мудро:
* {
box-sizing: border-box;
}
Попробуйте сами »
CSS3 Свойство размеры бокса
| Свойство | Описание |
|---|---|
| box-sizing | Определяет, как вычисляется ширина и высота элемента: они включают в себя отступы и границы, или нет |