Kāda ir atšķirība starp box-sizing: content-box un border-box?

Atšķirība starp box-sizing: content-box un box-sizing: border-box ir tajā, kā pārlūkprogramma aprēķina kopējos elementa izmērus:

• content-box (noklusējuma vērtība): platums un augstums norāda tikai saturu. Šo izmēru pievieno iekšējie attālumi (padding) un rāmji (border), palielinot galīgo elementa izmēru.

• border-box: platums un augstums ietver saturu, padding un border. Citiem vārdiem sakot, padding un border "iekļaujas" noteiktajos izmēros.

Piemērs:

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

• Ar content-box kopējais platums būs: 200 + 102 + 52 = 230px.
• Ar border-box kopējais platums paliks 200px, un saturs tiks samazināts, lai ietilptu padding un border.

border-box lietošana bieži ir ērtāka, jo elementu izmēri "neizplūst" dēļ padding un border.