box-sizing: content-box және border-box арасындағы айырмашылық неде?

box-sizing: content-box пен box-sizing: border-box арасындағы айырмашылық браузердің элементтің жалпы өлшемдерін қалай есептейтініне байланысты:

• content-box (әдепкі мән): ені мен биіктігі тек мазмұнның (контенттің) өлшемін анықтайды. Оған жиегі (padding) мен шекарасы (border) қосылады, бұл элементтің жалпы өлшемін арттырады.

• border-box: ені мен биіктігі мазмұнды, жиегін және шекарасын қамтиды. Яғни, padding мен border "ішіне" енеді.

Мысал:

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

• content-box кезінде жалпы ені: 200 + 102 + 52 = 230px.
• border-box кезінде жалпы ені 200px қалады, ал мазмұн padding мен шекараға сыйу үшін кішірейеді.

border-box қолдану жиі ыңғайлы, себебі элементтердің өлшемдері padding мен шекарадан "қызмет етпейді".