Свойство box-sizing

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

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

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

Исходный код этого примера:

<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>