Размер коробки - CSS-хитрости

Anonim

box-sizingСвойство в CSS управляет тем, как модель коробки обрабатывается для элемента она применяется.

.module ( box-sizing: border-box; )

Один из наиболее распространенных способов его использования - применить его ко всем элементам на странице, включая псевдоэлементы:

*, *::before, *::after ( box-sizing: border-box; )

Это часто называют «универсальным размером коробки», и это хороший способ работать! (Буквальный), который widthвы устанавливаете, - это ширина, которую вы получаете, без необходимости выполнять в уме математические вычисления и управлять сложностью, которая возникает из-за ширины, которая поступает из нескольких свойств. У нас даже есть день осведомленности о размерах коробки.

Значения

  • content-box: по умолчанию. Значения ширины и высоты применяются только к содержимому элемента. Заполнение и граница добавляются за пределами поля.
  • padding-box: Значения ширины и высоты применяются к содержимому элемента и его отступу. Граница добавляется за пределами поля. В настоящее время это padding-boxзначение поддерживает только Firefox .
  • border-box: Значения ширины и высоты применяются к содержимому, отступу и границе.
  • inherit: наследует размер блока родительского элемента.

Пример

В этом примере изображения сравниваются значения по умолчанию content-box(вверху) и border-box(внизу):

Красная линия между изображениями представляет значение ширины элементов. Обратите внимание, что элемент со значением по умолчанию box-sizing: content-box;превышает заявленную ширину, когда отступ и граница добавляются за пределы поля содержимого, в то время как элемент с box-sizing: border-box;примененным значением полностью помещается в заявленную ширину.

Использование размера коробки

Допустим, вы установили элемент на width: 100px; padding: 20px; border: 5px solid black;. По умолчанию ширина результирующего поля составляет 150 пикселей. Это связано с тем, что по умолчанию используется модель определения размеров блока content-box, которая применяет заявленную ширину элемента только к его содержимому, размещая отступы и границу за пределами блока элемента. Это эффективно увеличивает пространство, занимаемое элементом.

Если вы измените значение box-sizingна padding-box, заполнение вставляется внутрь поля элемента. Тогда поле будет иметь ширину 110 пикселей, с отступом 20 пикселей внутри и 10 пикселями границы снаружи. Если вы хотите поместить отступ и границу внутри поля, вы можете использовать border-box. Поле будет тогда шириной 100 пикселей - 10 пикселей границы и 20 пикселей отступа помещаются внутри поля элемента.

Демо

См. Сравнение значений размеров ящиков с помощью пера с помощью CSS-Tricks (@ css-tricks) на CodePen.

Связанный

  • width
  • height
  • padding
  • border

Поддержка браузера

Хром Сафари Fire Fox Опера IE Android iOS
Любой *† 3 * † 1 ‡ 7 * 8 * 2.1 * † Любой *

* padding-boxне поддерживается

† более старые версии требуют -webkitпрефикса (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozтребуется префикс до версии 28, без префикса с 29.