CSS Box Sizing

CSS Box Sizing

Рекомендуемый курс: box-sizing CSS

пroperty позволяет включать отступ (п Padding) и рамку в общую ширину и высоту элемента.

Если не указать свойство CSS box-sizing

  • По умолчанию ширина и высота элемента рассчитываются следующим образом:
  • width + padding + border = фактическая ширина элемента

height + padding + border = фактическая высота элемента

Это означает: когда вы устанавливаете ширину/высоту элемента, элемент обычно выглядит больше, чем вы установили (поскольку рамка и отступ уже добавлены к заданной ширине/высоте элемента).

На следующем рисунке показаны два элемента <div> с одинаковыми заданными шириной и высотой:
Этот div меньше
(ширина 300px, высота 100px).
Этот div больше

(ширина также 300px, высота 100px).

Пример

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;

Попробуйте сами

box-sizing Два элемента <div> в верхнем примере имеют разные размеры в конечном итоге (поскольку div2 определил отступ):

решает эту проблему.

box-sizing Если использовать CSS-свойство box-sizing

пroperty позволяет включать отступ и рамку в общую ширину и высоту элемента. box-sizing: border-box;Если установить на элементе

Теперь два div имеют одинаковый размер!
Ура!

Этот пример аналогичен предыдущему, оба элемента <div> установлены box-sizing: border-box;:

Пример

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;

Попробуйте сами

Из-за использования box-sizing: border-box; эффект так хорошо, что многие разработчики хотят, чтобы все элементы на странице работали таким образом.

Ниже приведен код, который обеспечивает более直观ею настройку размеров всех элементов. Многие браузеры уже успешно используют box-sizing: border-box;（но не все - именно поэтому input и textarea при width: 100%; выглядят по-разному).

Применение его ко всем элементам безопасно и разумно:

Пример

* {
  box-sizing: border-box;

Попробуйте сами

Свойство CSS Box Sizing

Свойство Описание
box-sizing Определение способа вычисления ширины и высоты элементов: должны ли они включать отступы (padding) и рамки?