Koja je razlika između box-sizing: content-box i border-box?

Razlika između box-sizing: content-box i box-sizing: border-box leži u načinu na koji pregledač računa ukupne dimenzije elementa:

• content-box (podrazumevana vrednost): širina i visina određuju samo sadržaj. Na ove dimenzije se dodaju unutrašnji razmaci (padding) i okviri (border), čime se povećava ukupna veličina elementa.

• border-box: širina i visina uključuju sadržaj, padding i border. Drugim rečima, padding i border "se uklapaju" unutar zadatih dimenzija.

Primer:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box; /* ili border-box */
}

• Sa content-box, ukupna širina će biti: 200 + 102 + 52 = 230px.
• Sa border-box, ukupna širina će ostati 200px, a sadržaj će se smanjiti da bi stao padding i border.

Korišćenje border-box je često praktičnije za raspored, jer dimenzije elemenata ne "naduvavaju" zbog paddinga i bordera.