CSS Box Model Bemutatása

A CSS Box Model meghatározza, hogyan épül fel egy HTML elem a böngészőben. Minden elem egy dobozként (box) viselkedik, amely négy rétegből áll: tartalom (content), belső margó (padding), szegély (border) és külső margó (margin).

Box Model Rétegei

Amikor egy HTML elemet formázunk, a következő rétegekkel dolgozunk:

  • Content (tartalom): Az elem tényleges tartalma (szöveg, kép, stb.)
  • Padding (belső margó): A tartalom és a szegély közötti üres terület
  • Border (szegély): A belső margó körüli keret
  • Margin (külső margó): A szegély körüli üres terület
20px
5px
15px
Margin
Border
Padding
Content
Tartalom

Box Sizing

A box-sizing tulajdonság meghatározza, hogyan számítódik ki egy elem teljes szélessége:

  • content-box: A megadott szélesség csak a tartalomra vonatkozik
  • border-box: A megadott szélesség tartalmazza a padding-ot és border-t is
0px
0px

content-box

Szélesség: 200px

Tartalom: 200px
+ Padding: 0px
+ Border: 0px
∑ Teljes: 200px

border-box

Szélesség: 200px

Tartalom: 200px
+ Padding: 0px
+ Border: 0px
∑ Teljes: 200px

Margin Collapse (Margók Összeolvadása)

Ha két elem egymás után következik, a függőleges margóik "összeolvadnak". Ilyenkor a nagyobb margó érvényesül a két érték közül. Ez csak függőleges irányban történik meg!

Első doboz (margin-bottom: 30px)
Második doboz (margin-top: 20px)

A két doboz közötti tényleges távolság: 30px (nem 50px!)

.box1 { margin-bottom: 30px; } .box2 { margin-top: 20px; } /* A távolság 30px lesz (a nagyobb érték), nem 50px! */

Negatív Margók

A margók negatív értékeket is felvehetnek, ami az elemet a megadott irányba "húzza". Ezt gyakran használják speciális elrendezések létrehozására.

0px
Referencia doboz
Ez a doboz mozog a negatív/pozitív margin hatására
.moving-box { margin-top: 0px; }