Kas ir kastes modelis CSS?

CSS blokējuma modelis apraksta, kā tiek aprēķināta telpa, ko aizņem elements tīmekļa lapā. Tas ietver:

• Saturs (content): Reģions faktiskajam elementa saturam (teksts, attēli).
• Iekšējie atstarpes (padding): Telpa starp saturu un elementa robežu.
• Robeža (border): Robeža, kas ietver padding un content.
• Ārējie atstarpes (margin): Telpa ap elementa robežu, atdalot to no citiem elementiem.

Elementa izmērs pēc noklusējuma (standarta modelī box-sizing: content-box) tiek noteikts, summējot content, padding un border izmērus. Margin tiek pievienots kopējai aizņemtajai telpai, bet neietekmē paša elementa izmēru.

Īpašība box-sizing: border-box maina elementa izmēra aprēķinu, iekļaujot padding un border kopējā platumā un augstumā. Šajā gadījumā elementa izmērs tiek noteikts ar width/height, un padding un border "ēd" vietu no content.

/* Standarta modelis (pēc noklusējuma) */
.element-content-box {
  width: 100px; /* Content izmērs */
  padding: 10px;
  border: 5px solid black;
  /* Kopējā platums: 100px (content) + 10px (padding-left) + 10px (padding-right) + 5px (border-left) + 5px (border-right) = 130px */
}

/* border-box modelis */
.element-border-box {
  width: 100px; /* Kopējais platums: content + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* Content izmērs: 100px - 10px (padding-left) - 10px (padding-right) - 5px (border-left) - 5px (border-right) = 70px */
}

Sapratne par blokējuma modeli ir kritiska precīzai elementu pozicionēšanai un izkārtojumam lapā.