Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВО BOX-SIZING

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

Поддержка браузеров


8+

Синтаксис

box-sizing: content-box|border-box|initial|inherit

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

Значение	Описание
content-box	Ширина и высота не включают в себя значения отбивки и рамки. Это значение по умолчанию.
border-box	Ширина и высота включают в себя значения отбивки и рамки.
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

Песочница

<div class="block block-1"></div>
<div class="block block-2"></div>

HTML

.block {
    background: beige;
    height: 100px;
    width: 100px;
    padding: 20px;
    border: 1px solid #333;
    margin-bottom: 20px
}

.block-2 {
    box-sizing: border-box
}

CSS

← Перейти к списку свойств