Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

box-sizing

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

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

Тип свойства

Назначение: размеры.

Применяется: ко всем элементам, у которых явно указана ширина или высота.

Наследуется: нет.

Значения

Значением свойства box-sizing являются ключевые слова указывающие способ расчета размеров блока.

  • content-box — Свойства width и height задают размеры только содержимого элемента.
  • border-box — Свойства width и height задают размеры элемента, включая содержимое, рамку и внутренние отступы.
  • inherit — наследует значение box-sizing от родительского элемента.

Процентная запись: не существует.

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

a) box-sizing: content-box — заданные высота и ширина распространяются только на содержимое элемента.

box-sizing: content-box

б) box-sizing: border-box — заданные высота и ширина распространяются на содержимое, внутренние отступы и рамку элемента.

box-sizing: border-box

Синтаксис

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

Пример CSS: использование box-sizing

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство box-sizing</title>
  <style type="text/css">
    p {
     width: 200px; /* ширина параграфов */
     height: 50px; /* их высота */
     border: 5px #000000 solid; /* стили рамки */
     padding: 10px; /* внутренние отступы */
    }
    .p2 {
     box-sizing: border-box; /* изменяем для второго параграфа способ расчета размеров */
    }
  </style>
 </head>
 <body>
  <p>content-box</p>
  <p class="p2">border-box</p>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS box-sizing в браузере Opera.

Использование свойства CSS box-sizing

Как видите, второй блок оказался меньше, так как к указанным ширине и высоте браузер не прибавил размеры рамки и внутренних отступов.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и вышеДо 9.09.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетДаНетДаНетДаНет
CSS по алфавиту
CSS по назначению