Box-sizing в CSS: content-box vs border-box

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

Свойство box-sizing в CSS определяет, как рассчитываются размеры элемента, включая его паддинг (padding) и границу (border). Оно помогает контролировать, как будет вычисляться общая ширина и высота элемента при добавлении внутренних отступов и границ.

Значения свойства box-sizing

content-box

• При box-sizing: content-box свойства width и height включают исключительно содержимое. Это означает, что паддинг и граница (border) не включаются в размеры, и они добавляются отдельно.
• Ширина элемента = содержимое + padding + border.
• Это стандартное поведение, которое использует большинство элементов в браузере.

Пример:

.element {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

В этом примере, элемент будет иметь общую ширину больше 200px, так как к указанной ширине добавляются padding и border.

border-box

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

.element {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

В этом случае, элемент будет иметь ширину 200px, включая padding и border, то есть размер остается точно таким, как указан.

Важные моменты

• box-sizing: content-box : размеры элемента могут увеличиваться с добавлением padding и border.
• box-sizing: border-box : размеры остаются постоянными, включая padding и border.