A weboldalon elhelyezett objektumok megjelenését írja le a doboz-modell. Eszerint minden, ami megjelenik, egy téglalap alakú dobozban helyezkedik el. Ennek a doboznak különböző méretei vannak, amelyek a hozzájuk tartozó tulajdonságokkal szabályozhatók. A doboznak a belsejében található a ténylegesen megjelenítendő objektum – az elem tartalma.
A dobozok egymásba pakolhatóak. Ebben az esetben a belső doboznak a méreteit a külső doboz korlátozza. Ugyanakkor több doboz kerülhet egymás mellé is, amely esetben szintén befolyásolhatják egymás méreteit. Ritka esetekben előfordulhat az is, hogy egyik doboz átnyúlik a szomszédos dobozba.
A weboldal egésze is egy dobozban található, amely általában a HTML vagy a BODY elemhez tartozik. A dokumentumban szereplő minden további objektum doboza ebbe a dobozba kerül bele.
A HTML elemek egyik része blokk-szintű, másik része sorbeli elem. Ezek megkülönböztetése szintén összefügg a dobozokkal:
A következőkben egy doboz részeit vesszük sorra a hozzájuk tartozó tulajdonságokkal együtt. A doboz felépítését a következő ábra szemlélteti:
Mint a képen látható, a legbelső, a tényleges tartalmat rejtő dobozt még három réteg veszi körbe – mindhárom szélessége lehet nulla is. A legbelső ezek közül a belső margó (angolul padding), amelynek szélességével lehet beállítani a szöveg és a keret közötti távolságot például. Ezután következik a keret (border), majd ezen kívül, a valódi margó (margin). Mindhárom felosztható felső, alsó, jobb- illetve baloldali részre.
Ahogy a képen is látható, az egyes részek találkozási pontját élnek (edge) nevezzük. Ebből leginkább a legbelső és a legkülső a fontos: a legkülsőn belül található az elem tartalma, amihez a doboz tartozik; a legkülső bedig a doboz külső határa, amelynél a szomszédos dobozokkal érintkezik. Amennyiben valamelyik határolóterület szélessége nulla, akkor a kétoldalán található él egybeesik.
A legbelső él által körülvett téglalapot (a tartalom van ebben) nevezzük belső doboznak, a legkülső él által megadott téglalapot külső doboznak.
A belső doboz szélességét a width
tulajdonság, magasságát a height
tulajdonság adja meg. A külső doboz – vagyis a teljes doboz –
szélességét illetve magasságát akkor kapjuk meg, ha ehhez a két megfelelő oldal
belső margójának, keretének és margójának szélességét is hozzáadjuk.
Tehát a doboz teljes szélessége a jobb- és baloldali margó, keret és belső margó szélességének, valamint a belső doboz szélességének összege. A doboz teljes magassága pedig a felső és az alsó margó, keret és belső margó szélességének és a belső doboz magasságának összege.
A doboz egyes részeinek háttere a következőképpen alakul:
background
tulajdonság értékétől függ.
A következő – a szabványban szereplő példa – megmutatja a doboz elemeit. Ebben megfigyelhető a belső margó és a külső margó határa az eltérő színek segítségével.
Ez valahogy így nézne ki:
Ahogy látható, a listát körülvevő 1em méretű zöld sáv a listaelemek margója, amely a listát tartalmazó doboz belső éléig tart.
A margó szélességének állítása oldalanként lehetséges a
margin-top,
margin-right,
margin-bottom és a
margin-left tulajdonságokkal,
amelyek rendre a felső, a jobboldali, az alsó és a baloldali margó szélességét
állítják. Ezek helyett alkalmazhatjük a négy oldalon a margó egyszerre történő
beállítására a margin
tulajdonságot.
A szélességértékek esetében a százalék megadása a belső doboz szélességének százaléka lesz még akkor is, ha a felső vagy az alsó margóról van szó. Ez alól az egyetlen kivétel, ha a megjelenítés lapokra bontva történik.
Mint már említettük, a margón a mögötte levő, az elemet tartalmazó dobozhoz beállított háttér átlátszik, így a margónak színt megadni nem lehet.
Szomszédos dobozok margói esetében, ha a margók között más nincs, elképzelhető, hogy azok egyetlen margóvá egyesülnek. A vízszintesen szomszédos margókkal ez soha nem következik be, ellenben a függőlegesen szomszédos margóknál a következők igazak:
A margókhoz hasonlóan a belső margók szélessége is oldalanként adható meg a
padding-top,
padding-right,
padding-bottom és
padding-left
tuladjonságokkal, vagy egyszerre mind a négy oldali a
padding tulajdonsággal.
A szélességnél a százalék használata ezúttal is a belső doboz szélességéhez relatív értéket eredményez. Ellentétben a margókkal, amelyek akár negatívak is lehetnek, a belső margó soha nem lehet negatív értékű.
A belső margó területén látható színt vagy képet az elem
background... tulajdonságai
határozzák meg, mivel ez megegyezik az elem tartalmánál megjelenő háttérrel.
A keretek megadását a margóhoz és a belső margóhoz képest több tulajdonság teszi lehetővé, mivel a színét és a stílusát is meg kell adni a szélességén kívül.
A keret szélessége is oldalanként állítható, ha a
border-width tulajdonság
helyett a border-?-width tulajdonságok valamelyikét használjuk,
ahol a kérdőjel helyén a top (felső), bottom (alsó),
right (jobb), left (bal) szavak valamelyike áll.
Szintén oldalanként vagy egyben állítható be. Ezúttal a
border-color tulajdonság
állítja be mind a négy oldalt, és a border-?-color alakú
tulajdonságokba a kérdőjel helyére a megfelelő oldalt kell beírni az oldalak
egyenkénti állítására.
A szokásos színmegadásokon felül
szerepelhet még a transparent szó is, amely esetén a keret átlátszó
lesz a margóhoz hasonlóan.
Ha nincs megadva a keret színe, akkor az elem betűszínét megadó
color tulajdonság határozza meg az
alkalmazott színt.
A keret stílusa is oldalanként adható meg a fentiekhez hasonlóan a
border-?-style kérdőjele helyére a megfelelő oldalt megadva, vagy
egyszerre mind a négy oldalon a
border-style
tulajdonsággal.
A keret stílusa sokféle lehet, azonban egyes régebbi böngészők csak az egyszerűbbeket ismerik. Ezeknél a bonyolultabb keretek sima folytonos vonalként szoktak megjelenni. A következőkben felsoroljuk a lehetséges kereteket:
nonedotteddashedsoliddoublegrooveridgeinsetoutsetMindegyik keret a doboz háttere fölött látszik, tehát ahol átlátszik a háttér, ott az elem háttere látszik.
A keret fenti három tulajdonsága megadható egyszerre is a
border tulajdonsággal mind a négy
oldalra, vagy a border-? tulajdonságokkal az egyes oldalakra, ha a
kérdőjel helyére a megfelelő oldal nevét írjuk be.
Mindezek után lássuk, hogy a böngésző az egyes dobozokban elhelyezve hogyan fogja megjeleníteni az elemeket. Ezt írja le a formázási modell.
Most, hogy a megjelenítés logikájáról már valamennyi ismerettel rendelkezünk, ismerjük meg a szöveg leírására és formázására szolgáló eszközöket is.
Az elemek csoportba foglalhatók akár egy blokkba, akár egy sor belsejébe helyezve. Erre alkalmasak a csoportosító elemek.