Mi a különbség a box-sizing: content-box és a border-box között?

A box-sizing: content-box és a box-sizing: border-box közötti különbség abban rejlik, hogy a böngésző hogyan számítja ki az elem összes méretét:

• content-box (alapértelmezett érték): a szélesség és magasság csak a tartalmat határozza meg. Ezekhez a méretekhez hozzáadódnak a belső margók (padding) és a keretek (border), növelve az elem végső méretét.

• border-box: a szélesség és magasság magában foglalja a tartalmat, a paddingot és a border-t. Más szavakkal, a padding és a border "belefér" a megadott méretekbe.

Példa:

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

• content-box esetén a teljes szélesség: 200 + 102 + 52 = 230px.
• border-box esetén a teljes szélesség marad 200px, és a tartalom csökken, hogy befogadja a paddingot és a border-t.

A border-box használata gyakran kényelmesebb a layout szempontjából, mivel az elemek méretei nem "duzzadnak" a padding és border miatt.