Свойство box-sizing в CSS3

Согласно спецификации 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">Ширина блока 300px с учетом полей и рамок (box-sizing: border-box;)</div>
<div class="box2">Ширина блока 300px без учета полей и рамок (box-sizing: content-box;)</div>