Tartalomjegyzék

A dobozmodell

A weboldal minden eleme egy téglalap alakú területen jelenik meg. Ha írunk egy bekezdést, beszúrunk egy táblázatot vagy egy képet, akkor ezek mind egy téglalap alakú területet, egy „dobozt” fognak elfoglalni a weboldalon. Ehhez a dobozhoz a W3C szabványának megfelelőn hozzárendelhetünk belső margót (padding), szegélyt (border), illetve margót (margin). Ezek a téglalap alakú területet elfoglaló tartalmat keretként veszik körül, a tartalomtól kifelé haladva, a felsorolt sorrendben.

Az alábbi ábra illusztrálja a dobozmodellt. A belső margón megjelenik a háttér, ha van. Utána a szegély következik valamilyen stílusban, majd végül a margó, ami átlátszó, ezért a szülő elem háttere fog rajta megjelenni. Az ábrában az is látszik, hogy az egyes területeket melyik CSS tulajdonsággal tudjuk elérni.

CSS dobozmodell, belülről kifelé: tartalom, belső margó (padding), keret (border), margó (margin).

Keretek

Tulajdonság Leírás Lehetséges értékek
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
Keret stílusának megadása. Ha nem állítjuk be, nem fog látszani a keret! none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
Keret vastagságának megadása. thin
medium
thick
length

Az összes lehetséges keretstílus.
Először mindig a keret stílusát kell megadni, csak így fog látszani a keret! Ha megadunk egy keretstílust, akkor már látszani fog a keret, és mind a négy oldalon ugyanaz lesz a stílus. A border-width tulajdonsággal megvastagítottam a kereteket, hogy jobban látszódjanak.

Különböző keretstílusok a négy oldalon.
Lehetőségünk van akár mind a négy oldalra (border-top-style, border-right-style, border-bottom-style, border-left-style) különböző kereteket megadni. A négy oldal értékét külön-külön is beállíthatjuk a felsorolt tulajdonságokkal, de egyszerre is a border-style tulajdonsággal. Ha a border-style tulajdonságnak csak egy értéket adunk meg, akkor az összes oldalra érvényes lesz; ha kettőt, akkor a felső és az alsó keret kapja az első stílust, míg a jobb és a bal oldal a második stílust; ha hármat, akkor a felső keret kapja az első stílust, a jobb és bal oldal a második stílust, míg az alsó keret a harmadikat; ha mind a négy stílust megadjuk, akkor a felső kerettől indulva az óramutató járásával megegyezően (top, right, bottom, left) kapják a keretek a stílusokat. Ugyanez vonatkozik a border-width (keretvastagság) és a border-color (keretszín) tulajdonságokra is.

border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
Keret színének megadása. color-rgb
color-hex
color-name
Különböző oldalon lévő keretek színének megadása.
border
border-top
border-right
border-bottom
border-left
Rövidebben lehet megadni a keret tulajdonságait, ebben a sorrendben: vastagság, stílus, szín. border-width
border-style
border-color

Kerettulajdonságok rövidített megadása.
Ha a border tulajdonságot használjuk, akkor mind a négy oldali keret ugyanolyan lesz, és az értékeket ebben a sorrendben kell megadni: border-width, border-style, border-color, egymással szóközzel elválasztva.
Ha a border-top tulajdonságot használjuk, akkor a megadott három jellemző csak a felső keretre lesz érvényes, ha a border-right tulajdonságot, akkor a jobboldalira és így tovább. A border-hez kellő három jellemző közül vagy az első (border-width), vagy az utolsó (border-color) elhagyható, de a középső (border-style) nem! (Hiszen ez kell ahhoz, hogy megjelenjen a keret.)

Lekerekített keret megvalósításának egy lehetséges módja.
A CSS 2.1 egyik hiányossága, hogy nem tudunk vele lekerekített kereteket létrehozni. A CSS 3-ba már bekerült ez a lehetőség, de amíg nem támogatják a böngészők, addig képeket kell használnunk erre a célra. Ez a példa a még nem tárgyalt float tulajdonságot használja, ami egyszerűen balra, vagy jobbra úsztatja ki a sarokképeket. Ennek a lekerekített sarkú doboznak a szélessége százalékban is megadható. Ha másfajta megoldást keresünk erre a problémára, akkor írjuk be a Google keresőbe a rounded corners vagy css rounded corners kifejezéseket!

Belső margó

Tulajdonság Leírás Lehetséges értékek
padding
padding-top
padding-right
padding-bottom
padding-left
Belső margó megadására szolgál. length
%
Belső margók megadása minden oldalra és külön-külön.
A padding tulajdonság használatakor ugyanúgy kell eljárnunk, mint a border esetében, azaz az első érték a padding-top értékét fogja állítani, és utána a többi érték szóközzel elválasztva az óramutató járásával megegyezően fogja beállítani a többi oldal belső margóját.

Külső margó

Tulajdonság Leírás Lehetséges értékek
margin
margin-top
margin-right
margin-bottom
margin-left
Külső margó megadására szolgál. auto
length
%

Külső margók megadása minden oldalra és külön-külön.
A margin tulajdonság használatakor ugyanúgy kell eljárnunk, mint a border esetében, azaz az első érték a margin-top értékét fogja állítani, és utána a többi érték szóközzel elválasztva az óramutató járásával megegyezően fogja beállítani a többi oldal külső margóját.

Negatív margó megadása.
Ez a példa azt mutatja be, hogy a margó értéke lehet negatív is. Az első három h2 elemnek semmilyen margót, a második háromnak negatív margót, a harmadik háromnak pedig pozitív margót állítottunk be. Az negydik h2-nek bal oldali -40px margót állítottunk be. Ha 40px értéket tettünk volna be, akkor jobbra tolódott volna a cím, mivel ennek az ellenkezőjét állítottuk be, ezért most balra tolódott. Hasonlóan, az ötödik h2-re pedig alsó -40px margót állítottunk be, ezért lefelé tolódott. Ezek után bemutattuk, hogy milyen hatást érünk el ugyanekkora, de pozitív értékű margókkal ugyanarra a három címre.

A body elem margója.
Ez a példa azt szemlélteti, hogy a body elemnek alapértelmezettként bizony van valamekkora margója. Hiszen a weboldalon csak egy div általános tárolóelem van, aminek a biztonság kedvéért 0 margót és belső margót állítottunk be, mégis hézag van mellette.

A body elem margójának eltüntetése.
Ha nem akarunk margót a body-nak, akkor egyszerűen állítsuk be a margin: 0; tulajdonságot rá! Azonban még célszerű a padding-ot is 0-ra állítani, mert van olyan böngésző, amelyiknél csak így tűnik el a margó.

Ajánlott linkek

CSS dobozmodell - hivatalos specifikáció (magyarul): http://htmlinfo.polyhistor.hu/css2ref/box.htm

CSS dobozmodell - hivatalaos specifikáció (angolul): http://www.w3.org/TR/CSS21/box.html

Az Internet Explorer 6 rosszul értelmezi a dobozmodellt (viszont csak quirks mode-ban): http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Lekerekített sarkok: http://www.schillmania.com/content/projects/even-more-rounded-corners/

Tartalomjegyzék Impresszum, szerzői jogok