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	Значение элемента наследуется от родительского элемента.