box-sizing

Это свойство определяет как будут вести себя размеры блока.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

При помощи свойства box-sizing можно изменить то, как браузер будет рассчитывать размеры элемента.

По умолчанию размером элемента считается размер контентной области. Если указываешь width, height, и padding, то браузер посчитает размер элемента как width + padding * 2 и height + padding * 2.

🤖 Если задать значение border-box для свойства box-sizing, то браузер изменит принцип расчёта и в width уже будет включён padding.

Подробнее об особенностях расчёта размеров элемента можно прочитать в статье «Блочная модель».

Пример

Секция статьи "Пример"

Создадим два элемента и зададим обоим элементам идентичные стили:

        
          
          <div class="element first"></div><div class="element second"></div>
          <div class="element first"></div>
<div class="element second"></div>

        
        
          
        
      
        
          
          .element {  display: inline-block;  width: 100px;  height: 100px;  padding: 25px;  border: 10px solid #ffffff;}
          .element {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 25px;
  border: 10px solid #ffffff;
}

        
        
          
        
      

Отличаться они будут только фоном и значением свойства box-sizing.

        
          
          .first {  box-sizing: content-box;  background-color: #ed6742;}.second {  box-sizing: border-box;  background-color: #f498ad;}
          .first {
  box-sizing: content-box;
  background-color: #ed6742;
}

.second {
  box-sizing: border-box;
  background-color: #f498ad;
}

        
        
          
        
      
Открыть демо в новой вкладке

В итоге элементы получились разного размера! Как так? Мы ведь указали одинаковые ширину, высоту и внутренние отступы, а так же рамку 🤔

Как это понять

Секция статьи "Как это понять"

Причина в том, что при значении свойства box-sizing, равном content-box (значение по умолчанию) ширина элемента рассчитывается следующим образом:

Ширина контентной области (100) + внутренний отступ слева и справа (25 + 25) + ширина правой и левой рамок (10 + 10). Итого: 170 пикселей.

Аналогично с высотой.

Выходит что первый элемент получил размеры 170 х 170.

Размер второго элемента считается иначе. Из-за значения свойства box-sizing браузер воспринимает width и height как конечные размеры элемента. Получается что в 100 пикселей указанной ширины уже включены и внутренние боковые отступы и боковые рамки. Размеры второго элемента будут 100 х 100.

Как это пишется

Секция статьи "Как это пишется"

В качестве значения для свойства box-sizing невозможно использовать что-то кроме ключевых слов. Значение может быть только одно.

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

  • content-box — значение по умолчанию. Финальная ширина = ширина + правый внутренний отступ + левый внутренний отступ + правая рамка + левая рамка
  • border-box — значение width и height являются финальными размерами элемента. Финальная ширина = ширина

Подсказки

Секция статьи "Подсказки"

💡 Свойство нельзя анимировать при помощи transition 😔

💡 Свойство не наследуется.

💡 При любом значении свойства внешние отступы (margin) в расчёт не берутся.

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

На практике

Секция статьи "На практике"

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

🛠 Из-за стандартного механизма расчёта размера элемента многие начинающие разработчики получают не те размеры элемента, которые ожидали. При этом есть два решения:

  1. Подгонять размер элемента под желаемый, высчитывая самостоятельно, какими должны быть внутренние отступы и рамка, чтобы в итоге получился нужный размер.
  2. В самом начале работы «сбросить» стандартное значение, заменив его на предсказуемое box-sizing.

Для «сброса» можно использовать универсальный селектор. Напиши в самом начале файла со стилями:

        
          
          * {  box-sizing: border-box;}
          * {
  box-sizing: border-box;
}

        
        
          
        
      

Теперь все размеры элементов будут равны тем значениям, что заданы в свойствах width и height. Так победим 🙌🏻