Box-sizing қасиеті элементтің өлшеміне қалай әсер етеді?

CSS box-sizing қасиеті элементтің өлшемдерін қалай есептеу керектігін анықтайды — оның ені мен биігіне ішкі жиегі (padding) және шекаралары (border) қосылатынын немесе қосылмайтынын.

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

• border-box мәні: ені мен биігі мазмұнды, ішкі жиегін және шекарасын қамтиды. Бұл дегеніміз, егер ені 100px деп қойсаңыз, мазмұн padding және border-ды ескере отырып, 100px-ке дейін азаяды, яғни жалпы өлшем 100px болады.

Мысал:

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

Бұл жағдайда .box элементінің жалпы ені 200px болады, оның ішінде padding және border бар. Егер content-box болса, онда жалпы ені 200 + 210 + 25 = 230px-ке дейін өсер еді.

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