Свойство box-sizing

Последнее обновление: 04.05.2011

Свойство box-sizing определяет, будет ли размер элемента включать только контент (по умолчанию) или контент, внутренние отступы и границы.

Допустимые значения

  • content-box — поведение ширины и высоты как в спецификации CSS 2.1. Внутренние отступы и границы элемента находятся за пределами указанной ширины и высоты.
  • border-box —внутренние отступы и границы элемента находятся в пределах указанной ширины и высоты. Ширина и высота непосредственно контента определяется вычитанием из указанного в свойстве значения значения границ и внутренних отступов элемента.
  • inherit — наследует значение от родителя.
иллюстрация CSS свойства  box-sizing:content-box иллюстрация CSS свойства box-sizing:border-box
иллюстрация box-sizing:content-box иллюстрация box-sizing:border-box
Значение по умолчанию content-box
Применимо ко всем элементам
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами
  • Internet Explorer 8 и выше
  • Opera 7 и выше
  • Chrome 10 и выше

Пример

.block {
width:60px;
height:80px;
padding:5px;
border:2px solid #000;
box-sizing: content-box;
}
Твой код:
Результат:
большой полигон

Заметки

Это свойство относится к CSS3 модулю CSS3 Basic User Interface Module — кандидата в рекомендацию W3C с 11 мая 2004 года.

Safari 3 и выше и Chrome 1 и выше поддерживают аналогичное свойство -webkit-box-sizing, а Firefox 1.0 и выше -moz-box-sizing. Свойство -moz-box-sizing также поддерживает значение padding-box (ширина и высота включает внутренние отступы, но не включает границы).

По теме

Показать комментарии