CSS Box Model

A CSS Box Model az egyik legalapvetőbb fogalom a webdizájnban. Meghatározza, hogyan épül fel minden HTML elem: tartalom, padding, border és margin alkotják az elemet körülvevő dobozt.

A Box Model elemei

A Box Model négy fő részből áll: tartalom (content), belső térköz (padding), keret (border) és külső térköz (margin). Ezek együtt határozzák meg az elem teljes méretét és elhelyezkedését.

Az alábbi példában egy <div> elem padding, border és margin beállításokkal jelenik meg:

Box Model vizuális példák

Az alábbi példák szemléltetik, hogyan változtatják meg a padding, border és margin értékek az elem megjelenését.

box-sizing használata

Alapértelmezés szerint a szélesség és magasság csak a tartalomra vonatkozik, a padding és border hozzáadódik. A <box-sizing: border-box;> beállítással viszont a padding és border is beleszámít a megadott méretekbe.

div {
  width: 200px;
  padding: 20px;
  padding: 5px solid black;
  margin: 10px;
}

Tippek a Box Model használatához

A Box Model megfelelő használata elengedhetetlen a pontos elrendezéshez. Az alábbi tippek segítenek:

• Használd a <box-sizing: border-box;> beállítást a kiszámíthatóbb méretezés érdekében.
• Mindig hagyj elég margót az elemek között az olvashatóság javítására.
• Kísérletezz különböző padding és border értékekkel a harmonikus dizájn érdekében.