Kā ietekmē box-sizing īpašība elementa izmēru?

CSS īpašība box-sizing nosaka, kā tiek aprēķināti elementa izmēri — vai iekļauj iekšējos attālumus (padding) un robežas (border) vai nē.

• Vērtība content-box (noklusējuma): elementa platums un augstums nosaka tikai saturu. Iekšējie attālumi un robežas tiek pievienoti šiem izmēriem, palielinot kopējo izmēru.

• Vērtība border-box: platums un augstums ietver saturu, iekšējos attālumus un robežas. Tas nozīmē, ka, ja iestādāt platumu 100px, saturs tiks samazināts, ņemot vērā padding un border, lai kopējais izmērs paliktu 100px.

Piemērs:

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

Šajā gadījumā, .box elements kopējais platums būs 200px, ieskaitot padding un border. Ja tas būtu content-box, kopējais platums būtu 200 + 210 + 25 = 230px.

border-box izmantošana bieži vien vienkāršo izkārtojumu, jo elementu izmēri "neizplūst" dēļ padding un border.