Hogyan befolyásolja a box-sizing tulajdonság az elem méretét?

A CSS box-sizing tulajdonság határozza meg, hogy az elem méretei hogyan kerülnek kiszámításra — beleértve vagy nem beleértve a belső margókat (padding) és a kereteket (border).

• content-box érték (alapértelmezett): az elem szélességét és magasságát csak a tartalom határozza meg. A belső margók és a keretek hozzáadódnak ezekhez a méretekhez, növelve az összméretet.

• border-box érték: a szélesség és magasság tartalmazza a tartalmat, a belső margókat és a kereteket. Ez azt jelenti, hogy ha 100px szélességet állítasz be, a tartalom a padding és border figyelembevételével lesz csökkentve, hogy az összméret 100px maradjon.

Példa:

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

Ebben az esetben a .box elem össz szélessége 200px lesz, beleértve a paddingot és a border-t. Ha content-box lenne, az össz szélesség 200 + 210 + 25 = 230px lenne.

A border-box használata gyakran egyszerűsíti a layout-ot, mivel az elemek méretei nem "szétszóródnak" a padding és border miatt.