Свойство box-sizing

Свойство box-sizing определяет способ расчета ширины (width) и высоты (height) элемента (и соответствующих min-width, min-height, max-width, max-height)

  • content-box
    content-box - (ширина/высота) блока = (ширина/высота) содержательной части элемента
  • padding-box
    padding-box - (ширина/высота) блока = толщина внутреннего поля + размер содержания
  • border-box
    border-box - (ширина/высоты) блока = толщина рамки + толщина внутреннего поля + размер содержания
  • inherit - наследует значение от родительского элемента

Свойство box-sizing определено в спецификации CSS 3 модуль Basic User Interface Level 3 (пользовательский интерфейс, уровень 3), применяется к все элементы, для которых возможно устанавливать свойства width или height, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение content-box. На данный момент в браузерах Opera поддержка данного свойства не реализована.

Смотри также:

Краткое описание

способ расчета размеров элемента

Синтаксис:

content-box | padding-box | border-box | inherit

По умолчанию:

content-box

Применяется к:

все элементы, для которых возможно устанавливать свойства width или height

Наследование:

не наследуется

Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент].style.box-sizing

Кроссбраузерная совместимость

Internet Explorer

55.5678910a
----+++

Firefox

2.03.03.53.64.05.06.07.08.09.010.011.012.013.0
---+/-+/-+/-+/-+/-+/-+/-+/-+/-+/-+/-

Chrome

1.02.03.04.15.06.07.08.09.010.011.012.013.014.015.016.017.018.019.020.0
------------------++

Safari

1.01.11.21.32.03.03.24.05.0
--------

Opera

не поддерживается