Mi az a box-sizing: border-box tulajdonság, és milyen szerepet játszik a CSS-ben?

A box-sizing tulajdonság határozza meg, hogy az elem teljes szélességét és magasságát hogyan számítjuk ki.

box-sizing: content-box (alapértelmezett érték) — a szélesség és magasság csak a tartalomra (content) vonatkozik. A padding és a border hozzáadódik a megadott szélesség/magasság értékekhez.

box-sizing: border-box — a szélesség és magasság tartalmazza a padding-et és a border-t. A content összenyomódik, hogy beleférjen a megadott méretekbe.

A box-sizing: border-box szerepe a CSS-ben:

• Egyszerűsítés a számításokban: Megkönnyíti az elemek méreteinek kiszámítását, különösen padding és border használatakor.
• Előre jelezhetőség a layoutban: Pontosan lehet meghatározni a blokkok méretét, függetlenül a padding és border-tól, így a layout előre kiszámíthatóbb lesz.
• Kényelmes a dobozmodellben: Az intuitív megértéshez igazodik — a blokk mérete, annak keretei. Könnyíti rácsok és fix méretű komponensek létrehozását.

Példa:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Teljes szélesség = 100 + 10*2 + 1*2 = 122px */
  /* Teljes magasság = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Teljes szélesség = 100px */
  /* Teljes magasság = 100px */
  /* A tartalom 100 - 10*2 - 1*2 = 78px széles és magas lesz */
}