A CSS Box Model (Dobozmodell)

Ha van egyetlen dolog a CSS-ben, amit tökéletesen meg kell értened, az a Box Model. A böngésző renderelő motorja számára a weboldalon lévő minden egyes HTML elem (legyen az egy bekezdés, egy kép, vagy egy gomb) egy láthatatlan, téglalap alakú doboz. A Box Model határozza meg, hogy ezek a dobozok mekkorák, és hogyan viszonyulnak egymáshoz.

A Doboz 4 Rétege

Képzelj el egy törékeny festményt, amit postán akarsz feladni. A Box Model pontosan úgy épül fel, mint a csomagolás:

• 1. Content (Tartalom): Ez maga a festmény. A szöveg, a kép, vagy a videó. Ennek a méretét a width (szélesség) és a height (magasság) tulajdonságokkal állítjuk be.
• 2. Padding (Belső margó): Ez a buborékfólia a festmény körül. Üres tér a tartalom és a doboz fala (kerete) között. A padding felveszi az elem háttérszínét.
• 3. Border (Keret): Ez a kartondoboz fala. Körbeöleli a paddinget és a tartalmat. Lehet vastag, vékony, szaggatott vagy láthatatlan.
• 4. Margin (Külső margó): Ez a távolság a te dobozod és a postásautóban lévő többi doboz között. A margin mindig teljesen átlátszó, és arra szolgál, hogy eltold egymástól a HTML elemeket.

A Box Model a gyakorlatban (Kód példa)

Nézzük meg, hogyan néz ki ez CSS kódban egy gomb esetében:

.gomb {
    width: 200px;           /* A tartalom szélessége */
    padding: 20px;          /* 20 pixel üres hely a szöveg és a keret között minden oldalon */
    border: 5px solid blue; /* 5 pixel vastag, kék, folyamatos keret */
    margin: 30px;           /* 30 pixel távolság a gomb és a többi elem között */
}

A Fejlesztők Rémálma: A Matematika

A fenti kód alapján mit gondolsz, mekkora helyet foglal el a gomb a képernyőn szélességben? Ha azt mondtad, hogy 200 pixelt, akkor tévedsz. És ez az, ami miatt a kezdők elrendezései mindig szétesnek.

Az alapértelmezett CSS szabályok szerint a doboz teljes szélessége így számolódik ki:
Width (200px) + Bal Padding (20px) + Jobb Padding (20px) + Bal Border (5px) + Jobb Border (5px) = 250px.

Ha te egy 1000 pixel széles konténerbe be akarsz tenni négy darab 250 pixeles dobozt, de adsz nekik egy kis paddinget, a negyedik doboz le fog esni a következő sorba, mert a padding megnövelte a dobozok fizikai méretét.

A Megoldás: A box-sizing: border-box trükk

Szerencsére a CSS3 behozott egy életmentő tulajdonságot. Ha a box-sizing értékét border-box-ra állítod, a böngésző megváltoztatja a matematikát. Ha megadsz egy 200px-es szélességet, a doboz pontosan 200px marad. A böngésző a paddinget és a keretet befelé fogja növelni, a tartalom rovására, így az elrendezésed sosem esik szét.

A profi fejlesztők minden projektjüket ezzel a "CSS Reset" kóddal kezdik, ami az oldalon lévő összes elemre (a * szelektorral) alkalmazza ezt a szabályt:

/* A modern webfejlesztés kötelező alapja */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}