Mi az a dobozmodell a CSS-ben?

A CSS dobozmodell leírja, hogy az elemek hogyan jelennek meg az oldalon téglalap alakú blokkokként. Négy zónából vagy rétegből áll, amelyek egymásra helyezkednek, kezdve a tartalommal:

1. Tartalom: Az a terület, ahol az elem valódi tartalma található (szöveg, képek stb.). Méretét a width és height tulajdonságok határozzák meg.

2. Padding (Belső margó): Átlátszó terület a tartalom és az elem szegélye között. A padding-top, padding-right, padding-bottom, padding-left tulajdonságokkal vagy a padding rövidítéssel állítható be.

3. Szegély (Border): A vonal, amely körülveszi a Paddinget és a Tartalmat. Stílusa, vastagsága és színe a border-width, border-style, border-color tulajdonságokkal vagy a border rövidítéssel adható meg.

4. Margó (Margin): Átlátszó terület az elem szegélye körül, amely elválasztja más elemektől. A margin-top, margin-right, margin-bottom, margin-left tulajdonságokkal vagy a margin rövidítéssel állítható be. Az egymás melletti blokkok margói összeolvadnak.

Az alapértelmezett viselkedés, amit a box-sizing: content-box (alapértelmezett) ír le, meghatározza, hogy a width és height tulajdonságok csak a Tartalomra vonatkoznak. A Padding és a Border hozzáadódik ehhez a mérethez, növelve az összméretet.

A box-sizing: border-box használatakor a width és height tartalmazza a Tartalmat, Paddinget és Border-t. A Margó mindig hozzáadódik az összmérethez, függetlenül a box-sizing értékétől.

Példa:

div {
  width: 100px; /* Tartalom szélessége (content-box esetén) vagy az egész elem szélessége (border-box esetén) */
  height: 50px; /* Tartalom magassága (content-box esetén) vagy az egész elem magassága (border-box esetén) */
  padding: 10px; /* Belső margó */
  border: 2px solid black; /* Szegély */
  margin: 15px; /* Külső margó */
}

A box-sizing értékétől függően az elem tényleges méretei eltérőek lesznek.

• box-sizing: content-box: A tényleges szélesség = 100px (Tartalom) + 10px (Padding balra) + 10px (Padding jobbra) + 2px (Border balra) + 2px (Border jobbra) = 124px. A tényleges magasság = 50px (Tartalom) + 10px (Padding fel) + 10px (Padding le) + 2px (Border fel) + 2px (Border le) = 74px.
• box-sizing: border-box: A tényleges szélesség = 100px (Tartalom + Padding + Border). A tényleges magasság = 50px (Tartalom + Padding + Border).

A külső margó margin: 15px hozzáadódik ehhez az összmérethez.