CSS Размер окна

Как работать с размером блока в CSS

По умолчанию браузеры при вычислении ширины элемента применяют вычисленную ширину и высоту кобласть содержимого, без учета отступов, границ и полей.

Этот подход оказался довольно сложным для работы.

Вы можете изменить это поведение, установивbox-sizingсвойство.

Вbox-sizingнедвижимость - большое подспорье. Имеет 2 значения:

  • border-box
  • content-box

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

border-boxэто то новое и замечательное, что мы ищем. Если вы установите это для элемента:

.my-div {
  box-sizing: border-box;
}

Расчет ширины и высоты включает отступы и границу. Остается только поле, что разумно, поскольку в нашем сознании мы также обычно рассматриваем это как отдельную вещь: поле выходит за рамки.

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

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

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: