W3docs
ru
Войти

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

Свойство box-sizing определяет расчёт ширины и высоты элемента. Примеры и возможность попрактиковаться.

Свойство box-sizing управляет тем, как вычисляются width и height элемента — конкретнее, входят ли padding и border внутрь этих размеров или добавляются поверх них. Это одно из свойств CSS3.

На этой странице объясняется разница между двумя блочными моделями (content-box и border-box), почему border-box является современным стандартом для большинства макетов и как применить его ко всей странице.

Как блочная модель влияет на размер

По умолчанию (content-box) width и height задают только размер области содержимого. Отступы и граница при этом добавляются поверх, поэтому отображаемый блок оказывается больше указанного значения:

  • ширина + padding + border = отображаемая ширина элемента
  • высота + padding + border = отображаемая высота элемента

Например, блок с width: 400px, padding: 50px с каждой стороны и 5px границей с каждой стороны фактически занимает 400 + 100 + 10 = 510px горизонтального пространства. Это частый источник ошибок вёрстки: два столбца шириной 50% с любым padding или border не встанут рядом, потому что каждый окажется шире половины контейнера.

При box-sizing: border-box padding и border вписываются внутрь объявленных ширины и высоты. Элемент с width: 50% останется ровно половиной ширины контейнера независимо от того, сколько padding или border вы добавите — именно поэтому большинство таблиц стилей сбрасывают все элементы к border-box.

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

Синтаксис

Синтаксис свойства CSS box-sizing

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

Пример ниже показывает два элемента <div> с одинаковыми значениями width, height, padding и border — они отличаются только значением box-sizing, чего достаточно, чтобы они отображались с разными размерами:

Пример свойства box-sizing

Пример свойства CSS box-sizing со значениями content-box и border-box

<!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 Example</h2>
    <hr />
    <h3>box-sizing: content-box (default):</h3>
    <div class="div1">The width for this div is set as 400px. Thus, the full width is 400px + 10px (left and right border) + 100px (left and right padding) = 510px.</div>
    <br />
    <h3>box-sizing: border-box:</h3>
    <div class="div2">The width and height apply to all parts of the div element: The full width is 400px.</div>
  </body>
</html>
Попробуйте сами »

Результат

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

При content-box отображаемый блок шире объявленного width, поскольку padding и border прибавляются к нему. При border-box padding и border поглощаются объявленными width и height, поэтому блок сохраняет именно тот размер, который вы указали.

border-box — значение, к которому вы будете обращаться чаще всего при построении макетов. Оно делает размеры элементов предсказуемыми и устраняет целый класс ловушек — можно добавлять padding или border, не пересчитывая ширину.

Пример двух блоков с границей, расположенных рядом

Здесь border-box позволяет двум блокам шириной 50% с обтеканием стоять рядом, даже если у каждого есть своя граница и padding. При стандартном content-box границы и padding суммарно превысили бы 100% и вытолкнули второй блок на новую строку.

Пример свойства CSS box-sizing со значением border-box

<!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 Example</h2>
    <p>Here you can see two bordered boxes defined side by side.</p>
    <div class="container">
      <div class="box">Left part</div>
      <div class="box">Right part</div>
      <div style="clear:both;"></div>
    </div>
  </body>
</html>
Попробуйте сами »

Применение border-box ко всей странице

Вместо того чтобы задавать box-sizing для каждого элемента отдельно, большинство проектов применяют его ко всем элементам через универсальный селектор. Это наиболее распространённый CSS-сброс в современных таблицах стилей:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Селекторы *::before и *::after гарантируют, что блоки с генерируемым содержимым подчиняются тому же правилу. После этого сброса width и height повсеместно означают «общий размер с учётом padding и border», что соответствует интуитивному ожиданию большинства разработчиков.

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

box-sizing поддерживается во всех современных браузерах, включая актуальные версии Chrome, Firefox, Safari и Edge. Это стабильное свойство CSS3, которое не требует вендорных префиксов для современных браузеров.

Значения

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

Практика

Практика
Что делает свойство CSS 'box-sizing'?
Что делает свойство CSS 'box-sizing'?
Was this page helpful?