box-sizing

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

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

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

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

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

        
          
          <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: #2E9AFF;}.second {  box-sizing: border-box;  background-color: #F498AD;}
          .first {
  box-sizing: content-box;
  background-color: #2E9AFF;
}

.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.

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать