CSS свойство box-sizing

Свойство box-sizing определяет, каким образом производить расчет свойств width и height, если эти свойства содержат padding и borders.

По умолчанию, толщина и высота элемента вычисляются следующим образом:

  • width + padding + border = фактическая толщина элемента
  • height + padding + border = фактическая высота элемента

Таким образом, когда толщина и высота элемента установлены, элемент часто отображается больше установленного (так как border и padding добавляются к заданным width и height элемента).

Значение по умолчанию content-box
Применяется Ко всем элементам, которые могут иметь толщину и высоту.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.boxSizing = "border-box";

Синтаксис

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

В этом примере отображены два <div> элемента с одинаково заданной толщиной и высотой:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      .div1 {
      box-sizing: content-box;
      width: 400px;
      height: 50px;
      padding: 50px;
      border: 5px double #1c87c9;
      }
      .div2 {
      box-sizing: border-box;
      width: 400px;
      height: 50px;  
      padding: 50px;
      border: 5px dashed #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример box-sizing</h2>
    <hr />
    <h3>box-sizing: content-box (по умолчанию):</h3>
    <div class="div1">Толщина этого div элемента установлена на 400px. Таким образом, общая толщина получится 400px + 10px (левая и правая граница) + 100px (левый и правый отступ) = 510px.</div>
    <br>
    <h3>box-sizing: border-box:</h3>
    <div class="div2">Толщина и высота применяются ко всем частям div элемента:общая толщина - 400px.</div>
  </body>
</html>

Если свойство box-sizing установлено со значением content-box, общая толщина будет больше, чем заданная толщина div элемента. А если использовано значение border-box, padding и border будут включены в width и height.

Рассмотрим другой пример с двумя граничными блоками, которые установлены рядом друг с другом:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div.container {
      width: 100%;
      border: 2px double #1c87c9;
      }
      div.box {
      box-sizing: border-box;
      width: 50%;
      border: 3px solid #ccc;
      float: left;
      padding: 3px;
      }
    </style>
  </head>
  <body>
    <h2>Пример box-sizing</h2>
    <p>Здесь увидите две граничные блоки, которые установлены рядом друг с другом.</p>
    <div class="container">
      <div class="box">Левая часть</div>
      <div class="box">Правая часть</div>
      <div style="clear:both;"></div>
    </div>
  </body>
</html>

Значения

Значение Описание
content-box Свойства width и height включают content, но padding border или margin не включены. Значение по умолчанию.
border-box Свойства width и height включают content, padding и border, но не включают margin.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
10.0+
4.0-9.0 -wbkit-
12.0+ 29.0+
2.0-28.0 -moz-
5.1+
3.1-5.0 -webkit-
10.0+

Практикуйте свои знания

Что делает свойство CSS 'box-sizing'?
Считаете ли это полезным?