Chciałbym przedstawić, a nawet zobrazować, model pudełkowy, na czym on dokładnie polega.
Przygotowanie kodu HTML
Musimy przygotować sobie element, na którym będziemy przedstawiać nasz model pudełkowy. Zachęcam też do zapoznania się z dokumentacją.
<div class="container">
<div class="item">#1</div>
</div>
Możemy także wstępnie przygotować style, rzecz jasna we flexbox i wskazać selektory elementów, które zostaną dołączone do naszego modelu.
.container {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 100%;
max-width: 400px;
padding: 2rem;
}
.item {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
padding: 20px;
border: 3px solid #eee;
margin: 20px;
/* tu wstawimy box-sizing */
}
Oto jak przedstawi się nasz element:

content-box
Domyślną wartością dla właściwości box-sizing
jest content-box
. Nasz przygotowany element ma wymiary 100×100 pikseli. Model pudełkowy dla tego elementu opisanego wartością content-box
nie będzie zawierał własności padding, border oraz margin. Przedstawia się to następująco:

Jak widać wielkość 100×100 pikseli w tym modelu odnosi się do samej zawartości elementu.
border-box
Z kolei wartość border-box
sprawi, że wielkość naszego elementu (100×100 pikseli) będzie zawierała w sobie już padding, border oraz margin. Oznacza to, że sam obszar zawartości elementu będzie zmniejszony o wartości otaczające. Obrazując:

Wsparcie przeglądarek
Podsumowanie
Różnica między tymi dwoma wartościami, jak widać, jest znacząca. Warto definiować model na początku pracy z kodem, by później uniknąć kłopotów, np. z pozycjonowaniem elementów obok siebie.