Box sizing border box что это

Свойство box-sizing

Свойство box-sizing может принимать одно из двух значений – border-box или content-box . В зависимости от выбранного значения браузер по-разному трактует значение свойств width/height .

Значения box-sizing

content-box Это значение по умолчанию. В этом случае свойства width/height обозначают то, что находится внутри padding . border-box Значения width/height задают высоту/ширину всего элемента.

Для большей наглядности посмотрим на картинку этого div в зависимости от box-sizing :

/*+ no-beautify */ div

В верхнем случае браузер нарисовал весь элемент размером в width x height , в нижнем – интерпретировал width/height как размеры внутренней области.

Исторически сложилось так, что по умолчанию принят content-box , а border-box некоторые браузеры используют если не указан DOCTYPE , в режиме совместимости.

Но есть как минимум один случай, когда явное указание border-box может быть полезно: растягивание элемента до ширины родителя.

Пример: подстроить ширину к родителю

Задача: подогнать элемент по ширине внешнего элемента, чтобы он заполнял всё его пространство. Без привязки к конкретному размеру элемента в пикселях.

Например, мы хотим, чтобы элементы формы ниже были одинакового размера:

  
   опции  

Как сделать, чтобы элементы растянулись чётко по ширине FORM ? Попробуйте добиться этого самостоятельно, перед тем как читать дальше.

Попытка width:100%

Первое, что приходит в голову – поставить всем элементам INPUT ширину width: 100% .

 form < width: 200px; border: 2px solid green; >form input, form select 
  опции 

Как видно, не получается. Элементы вылезают за пределы родителя.

Причина – ширина элемента 100% по умолчанию относится к внутренней области, не включающей padding и border . То есть, внутренняя область растягивается до 100% родителя, и к ней снаружи прибавляются padding/border , которые и вылезают.

Есть два решения этой проблемы.

Решение: дополнительный элемент

Можно убрать padding/border у элементов INPUT/SELECT и завернуть каждый из них в дополнительный DIV , который будет обеспечивать дизайн:

 form < width: 200px; border: 2px solid green; >/* убрать padding/border */ form input, form select < padding: 0; border: 0; width: 100%; >/* внешний div даст дизайн */ form div 
 
 
 
 опции  
 

В принципе, это работает. Но нужны дополнительные элементы. А если мы делаем дерево или большую редактируемую таблицу, да и вообще – любой интерфейс, где элементов и так много, то лишние нам точно не нужны.

Кроме того, такое решение заставляет пожертвовать встроенным в браузер дизайном элементов INPUT/SELECT .

Решение: box-sizing

Существует другой способ, гораздо более естественный, чем предыдущий.

При помощи box-sizing: border-box мы можем сказать браузеру, что ширина, которую мы ставим, относится к элементу полностью, включая border и padding :

 form < width: 200px; border: 2px solid green; >form input, form select 
  опции 

Мы сохранили «родную» рамку вокруг INPUT/SELECT и не добавили лишних элементов. Всё замечательно.

Свойство box-sizing поддерживается в IE начиная с версии 8.

box-sizing¶

Свойство box-sizing применяется для изменения алгоритма расчёта ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента ( width ), значений отступов ( margin ), полей ( padding ) и границ ( border ). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Демо¶

Синтаксис¶

1 2 3 4 5 6 7 8

/* Keyword values */ box-sizing: content-box; box-sizing: border-box; /* Global values */ box-sizing: inherit; box-sizing: initial; box-sizing: unset; 

Значения¶

content-box

Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.

Свойства width и height включают в себя значения полей ( padding ) и границ ( border ), но не отступов ( margin ).

Примечания¶

Firefox до версии 29 поддерживает свойство -moz-box-sizing .

Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 поддерживают свойство -webkit-box-sizing .

box-sizing: content-box; 

Применяется ко всем элементам

Спецификации¶

Поддержка браузерами¶

Can I Use css3-boxsizing? Data on support for the css3-boxsizing feature across the major browsers from caniuse.com.

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

 html> head> meta charset="utf-8" /> title>box-sizingtitle> style> .box1  background: #f0f0f0; /* Цвет фона */ width: 300px; /* Ширина блока */ padding: 10px; /* Поля */ border: 2px solid #000; /* Параметры рамки */ > .box2  background: #fc0; /* Цвет фона */ width: 300px; /* Ширина блока */ padding: 10px; /* Поля */ margin-top: 10px; /* Отступ сверху */ border: 2px solid #000; /* Параметры рамки */ box-sizing: border-box; /* Ширина блока с полями */ > style> head> body> div class="box1"> Ширина с учетом значения свойства width, полей и границ. div> div class="box2"> Ширина равна значению свойства width. div> body> html> 

box — sizing

Это свойство определяет как будут вести себя размеры блока.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

• Светлана Коробцева ,
• Антон Капустинский

Обновлено 2 ноября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

При помощи свойства box — sizing можно изменить то, как браузер будет рассчитывать размеры элемента.

По умолчанию размером элемента считается размер контентной области. Если кроме width и height указать ещё и padding с border , то браузер посчитает размер элемента как width + padding * 2 + border * 2 и height + padding * 2 + border * 2 .

�� Если задать значение border — box для свойства box — sizing , то браузер изменит принцип расчёта и padding с border уже будут включены в width и height .

Подробнее об особенностях расчёта размеров элемента можно прочитать в статье «Блочная модель».

Пример

Скопировать ссылку «Пример» Скопировано

Создадим два элемента и зададим обоим элементам идентичные стили:

 div class="element first">div> div class="element second">div>    Скопировать Скопировано Не удалось скопировать   

 .element  display: inline-block; width: 100px; height: 100px; padding: 25px; border: 10px solid #ffffff;> .element  display: inline-block; width: 100px; height: 100px; padding: 25px; border: 10px solid #ffffff; >    Скопировать Скопировано Не удалось скопировать   

Отличаться они будут только фоном и значением свойства box — sizing .

 .first  box-sizing: content-box; background-color: #2E9AFF;> .second  box-sizing: border-box; background-color: #F498AD;> .first  box-sizing: content-box; background-color: #2E9AFF; > .second  box-sizing: border-box; background-color: #F498AD; >    Скопировать Скопировано Не удалось скопировать   

В итоге элементы получились разного размера! Как так? Мы ведь указали одинаковые ширину, высоту и внутренние отступы, а так же рамку ��

Как понять

Скопировать ссылку «Как понять» Скопировано

Причина в том, что при значении свойства box — sizing , равном content — box (значение по умолчанию) ширина элемента рассчитывается следующим образом:

Ширина контентной области (100) + внутренний отступ слева и справа (25 + 25) + ширина правой и левой рамок (10 + 10). Итого: 170 пикселей.

Аналогично с высотой.

Выходит что первый элемент получил размеры 170 х 170.

Размер второго элемента считается иначе. Из-за значения свойства box — sizing браузер воспринимает width и height как конечные размеры элемента. Получается что в 100 пикселей указанной ширины уже включены и внутренние боковые отступы и боковые рамки. Размеры второго элемента будут 100 х 100.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

В качестве значения для свойства box — sizing невозможно использовать что-то кроме ключевых слов. Значение может быть только одно.

• content — box — значение по умолчанию. Финальная ширина = ширина + правый внутренний отступ + левый внутренний отступ + правая рамка + левая рамка
• border — box — значение width и height являются финальными размерами элемента. Финальная ширина = ширина

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство нельзя анимировать при помощи transition ��

�� Свойство не наследуется.

�� При любом значении свойства внешние отступы ( margin ) в расчёт не берутся.

�� Значение по умолчанию: content — box .

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Из-за стандартного механизма расчёта размера элемента многие начинающие разработчики получают не те размеры элемента, которые ожидали. При этом есть два решения:

1. Подгонять размер элемента под желаемый, высчитывая самостоятельно, какими должны быть внутренние отступы и рамка, чтобы в итоге получился нужный размер.
2. В самом начале работы «сбросить» стандартное значение, заменив его на предсказуемое box — sizing .

Для «сброса» можно использовать универсальный селектор. Напиши в самом начале файла со стилями:

 *  box-sizing: border-box;> *  box-sizing: border-box; >    Скопировать Скопировано Не удалось скопировать   

Теперь все размеры элементов будут равны тем значениям, что заданы в свойствах width и height . Так победим ����

box-sizing

Применяется для изменения алгоритма расчета ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента ( width ), значений отступов ( margin ), полей ( padding ) и границ ( border ). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Синтаксис

box-sizing: content-box | border-box | padding-box | inherit

Значения

content-box Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ. border-box Свойства width и height включают в себя значения полей и границ, но не отступов ( margin ). Эта модель используется браузером Internet Exporer в режиме несовместимости. padding-box Свойства width и height включают в себя значения полей, но не отступов ( margin ) и границ ( border ). inherit Наследует значение родителя.

HTML5 CSS3 IE Cr Op Sa Fx

В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента ( width ), полей слева и справа ( padding ) и толщины границ ( border ). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing . Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Ширина блоков

Браузеры

Firefox поддерживает нестандартное свойство -moz-box-sizing .

Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают нестандартное свойство -webkit-box-sizing .

Internet Explorer, Chrome, Opera и Safari не поддерживают значение padding-box .