Наша группа в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Свойство box-sizing

Согласно спецификации CSS свойства width и height задают ширину и высоту контента и не включают в себя значения отступов (margin), полей (padding) и границ (border).

Свойство box-sizing меняет алгоритм расчета ширины и высоты блока.

Пример с шириной блока

Ширина блока с учетом полей и рамок:
box-sizing: border-box;
Ширина блока без учета полей и рамок:
box-sizing: content-box;
Исходный код этого примера:
<style>
   .box1,
   .box2 {
    width: 300px;
    padding: 10px;
    border: 2px solid #000;
    margin-top: 10px;
    background: #9cf;
    }
   .box1 {
    box-sizing: border-box; /* Ширина блока с учетом полей и рамок */
   }
   .box2 {
    box-sizing: content-box; /* Ширина блока без учета полей и рамок */
   }
</style>

<div class="box1">Ширина блока с учетом полей и рамок:<br>box-sizing: border-box;</div>
<div class="box2">Ширина блока без учета полей и рамок:<br>box-sizing: content-box;</div>


.