Mi az a dobozmodell a CSS-ben?

A CSS-ben a dobozmodell leírja, hogy számítódik ki egy elem által foglalt tér a weboldalon. Ez magában foglalja:

• Tartalom: Az elem tényleges tartalmának területe (szöveg, képek).
• Padding (belső margó): A tér az tartalom és az elem szegélye között.
• Border (határ): A szegély, amely körülveszi a paddinget és a tartalmat.
• Margin (külső margó): A tér az elem szegélye körül, amely elválasztja más elemektől.

Az elem alapértelmezett mérete (a box-sizing: content-box modellben) a tartalom, padding és border méretének összegéből áll. A margin hozzáadódik az összterülethez, de nem befolyásolja az elem saját méretét.

A box-sizing: border-box tulajdonság megváltoztatja az elem méretének számítását, beleértve a paddinget és a border-t az össz szélességbe és magasságba. Ebben az esetben az elem mérete a width/height szerint van meghatározva, és a padding, border "elfoglal" helyet a tartalomban.

/* Alapértelmezett modell (default) */
.element-content-box {
  width: 100px; /* Tartalom mérete */
  padding: 10px;
  border: 5px solid black;
  /* Teljes szélesség: 100px (tartalom) + 10px (bal padding) + 10px (jobb padding) + 5px (bal border) + 5px (jobb border) = 130px */
}

/* border-box modell */
.element-border-box {
  width: 100px; /* Teljes szélesség: tartalom + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* Tartalom mérete: 100px - 10px (bal padding) - 10px (jobb padding) - 5px (bal border) - 5px (jobb border) = 70px */
}

A dobozmodell megértése alapvető a pontos pozícionáláshoz és elemek összerakásához az oldalon.