Что такое box sizing
CSS3: свойство Box-Sizing
Раньше, если мы делали div шириной и высотой 100px, добавляли padding 10px и border 10px, то получался квадрат не 100х100, а 140х140 px:
Но иногда требуется, чтобы div был фиксированной ширины при любых значениях padding и border. В CSS3 нам поможет свойство box-sizing.
Использование box-sizing
Поддержка браузерами
Свойство box-sizing поддерживает большинство современных браузеров: Firefox 3.6+, Safari 3+, Opera 8.5+ и Internet Explorer 8+. Актуальные данные можно посмотреть на сайте caniuse.com.
Практический пример
Рассмотрим реальный пример использования свойства box-sizing. Есть меню из пяти пунктов:
Добавим немного CSS, в т.ч. фиксированную ширину меню в 500 px и ширину каждого элемента в 100 px:
Меню выглядит нормально:
Но при добавлении левого или правого border’а последний пункт меню съезжает, потому что не помещается:
Но если использовать box-sizing, то этой проблемы нет:
Box-Sizing: секрет простых лейаутов
Box-sizing – это свойство CSS, которое делает верстку макетов сайта более понятным. Если вы работали с CSS, то вы знаете, что использование свойств width, padding и border ведет к путанице. Иногда, когда используется свойство width, оно не может быть всегда применено к тому, что вы ожидаете – например ширина width задается в процентах, а граница border указывается в пикселях. Тем не менее, используя свойство box-sizing, ширина блока в 200px будет действительно отображать блок шириной 200px.
Это никак не связано с JavaScript и это также работает в Internet Explorer, начиная с 8й версии.
Блочная модель
Ширина и высота любого элемента на веб-странице описана в блочной модели CSS. Тонкости блочной модели могут быть сложными, но самая важная часть к понимаю это то, как вычисляются ширина и высота блока на странице. Сумма нескольких свойств CSS образует фактически отображаемую ширину и высоту блока.
Без box-sizing, ширина width представляет собой область содержимого (158px).
Актуальная ширина включает ширину области – content, отступы – padding, и границу – border.
Это означает, что если будет установлена ширина 200px, то элемент займет точно указанный размер, если не будет padding и border. Т.е., свойство width означает ширину контентной области, а не ширину всего блока (включая padding и border).
Если вы хотите сделать ширину блока равной 200px, а потом захотите сделать отступы по 20px с каждой стороны, необходимо позаимствовать 40px (20px для левой и 20px для правой сторон) от этой ширины. То же самое надо сделать, при установке величины border. Все это делает код менее читабельным. Чтобы блок имел общую ширину 200px, необходимо код писать так:
Все это не очень удобно. К счастью, есть более лучший и наглядный способ, который может привести к аналогичному результату.
Вместо вычисления ширины, включающей отступы и границы, свойство box-sizing в сочетании с border-box использует собственную ширину в качестве общей ширины блока. И предыдущий код можно изменить так:
Теперь любые отступы или границы не будут добавлены к общей ширине. Вместо этого, они будут автоматически вычитаться из предоставленного пространства. Это приводит к тому, что код становится более понятным для чтения и понимания.
Ниже показано изображение, каким образом свойство box-sizing:border-box расчитывает ширину
Когда box-sizing включен – ширина width является шириной всего блока.
Ширина контента автоматически подстраивается в зависимости от правого и левого отступа, и значений бордеров.
На самом деле, многие веб-дизайнеры и разработчики выступают за использование на веб-страницах для всех элементов более естественного и интуитивного подхода к компоновке блоков.
Paul Irish предлагает использовать следующий код для этого:
Свойство box-sizing не новое, и только из-за того, что оно не поддерживалось в браузерах Internet Explorer ниже 8й версии, его не применяли. Теперь, когда вышли новые версии браузеров эта техника работы с box-sizing становится популярной и рекомендуется использовать ее при создании своих сайтов. Для более полной информации о поддерживаемых браузеров, смотрите в таблице.
Также свойство box-sizing, по-умолчанию, встроено в стили популярных фреймворков Bootstrap и Foundation. Оба эти фреймворка применяют значение border-box к абсолютно всем элементам, что делает их системы более понятными.
box-sizing
Время чтения: меньше 5 мин
Обновлено 20 декабря 2021
Кратко
При помощи свойства box-sizing можно изменить то, как браузер будет рассчитывать размеры элемента.
Подробнее об особенностях расчёта размеров элемента можно прочитать в статье «Блочная модель».
Пример
Создадим два элемента и зададим обоим элементам идентичные стили:
В итоге элементы получились разного размера! Как так? Мы ведь указали одинаковые ширину, высоту и внутренние отступы, а так же рамку 🤔
Как это понять
Ширина контентной области (100) + внутренний отступ слева и справа (25 + 25) + ширина правой и левой рамок (10 + 10). Итого: 170 пикселей.
Аналогично с высотой.
Выходит что первый элемент получил размеры 170 х 170.
Размер второго элемента считается иначе. Из-за значения свойства box-sizing браузер воспринимает width и height как конечные размеры элемента. Получается что в 100 пикселей указанной ширины уже включены и внутренние боковые отступы и боковые рамки. Размеры второго элемента будут 100 х 100.
Как это пишется
В качестве значения для свойства box-sizing невозможно использовать что-то кроме ключевых слов. Значение может быть только одно.
Подсказки
💡 Свойство нельзя анимировать при помощи transition 😔
💡 Свойство не наследуется.
💡 При любом значении свойства внешние отступы ( margin ) в расчёт не берутся.
На практике
Алёна Батицкая
🛠 Из-за стандартного механизма расчёта размера элемента многие начинающие разработчики получают не те размеры элемента, которые ожидали. При этом есть два решения:
CSS Размер блока
CSS свойство box-sizing позволяет включать отступы и границы в общую ширину и высоту элемента.
Без CSS свойства box-sizing
По умолчанию ширина и высота элемента рассчитывается следующим образом:
width + padding + border = фактическая ширина элемента
height + padding + border = фактическая высота элемента
Это означает, что когда вы устанавливаете ширину / высоту элемента, элемент часто кажется больше, чем вы установили (потому что граница и отступ элемента добавляются к указанной ширине / высоте элемента).
На следующем рисунке показаны два элемента
Пример
.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; добавлен в оба элемента
Пример
.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; намного лучше, многие разработчики хотят, чтобы все элементы на их страницах работали таким образом.
Применять это ко всем элементам безопасно и разумно:
CSS Box Sizing
Размер окна CSS
Свойство CSS box-sizing позволяет нам включать заполнение и границу в общую ширину и высоту элемента.
Без CSS окно-Изменение размера свойства
По умолчанию ширина и высота элемента вычисляется так:
Ширина + отступ + граница = фактическая ширина элемента
Высота + отступ + граница = фактическая высота элемента
Это означает, что при задании ширины/высоты элемента элемент часто отображается больше, чем задано (поскольку граница элемента и отступ добавляются к указанной ширине/высоте элемента).
На следующем рисунке показаны два элемента
Пример
.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: border-box; на элементе Padding и граница включены в ширину и высоту:
Вот такой же пример, как и выше, с box-sizing: border-box; Добавлено в оба элемента
Пример
.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%;).
Применение этого ко всем элементам является безопасным и мудрым:
Пример
Tip: Try to remove the box-sizing property from the style element and look what happens. Notice that the width of input, textarea, and submit button will go outside of the screen.