Mi az a dobozmodell a CSS-ben?

A CSS-ben a dobozmodell egy téglalap alakú területet ír le, amely minden elemhez generálódik, és a méreteinek és pozíciójának kiszámítására szolgál. Négy részből áll:

• Tartalom doboz: Az a terület, ahol az elem tartalma (szöveg, képek stb.) megjelenik. Méretét a width és height tulajdonságok határozzák meg.
• Párnázás doboz: A tartalom és az elem határa közötti tér. Méretét a padding tulajdonság határozza meg. Az elem háttérszíne és képe erre a területre terjed ki.
• Határ doboz: Az elem határa, amely körülveszi a padding dobozt. Méretét a border tulajdonságok határozzák meg.
• Margó doboz: A tér az elem határa körül, amely elválasztja más elemektől. Méretét a margin tulajdonság határozza meg. Ez a terület mindig teljesen átlátszó.

Az elem alapértelmezett méretét a következőképpen számítjuk:

szélesség = width + padding-left + padding-right + border-left-width + border-right-width
magasság = height + padding-top + padding-bottom + border-top-width + border-bottom-width

A box-sizing tulajdonság lehetővé teszi ennek a modellnek a módosítását:

• content-box (alapértelmezett): A width és height csak a tartalom dobozára vonatkozik.
• border-box: A width és height magában foglalja a paddinget és a határt.

.element-default {
  width: 100px; /* Tartalom doboz szélessége = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Az elem tényleges szélessége: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Az elem tényleges szélessége = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Tartalom doboz szélessége: 100 - 10 - 10 - 5 - 5 = 70px */
}