CSS -> Margók-, szegélyek-, és a kitöltés tulajdonságai

Egy oldal tervezésénél, kivitelezésénél nagyon fontosak a margók, a szegélyek és a kitöltések.
A doboz (DIV) elhelyezésénél, vagy szöveg, kép igazításánál fontos szerepet kapnak, hisz befolyásolják az adott elem elhelyezkedését, vagy a szöveg és az oldal széle illetve egy kép közötti üres hely méretét.

A három tulajdonság megértéséhez szükségünk van a CSS dobozmodelljének ismeretére.
A modell szerint minden elem egy négyszögletes dobozban van. A doboz külső részén ( legszélsőbb keretén) a margó helyezkedik el. Ez befolyásolja a többi, szomszédos elemtől való távolságot. A margón belül a szegély (border) van. Ez rendelkezik szín, vastagság, vonaltípus tulajdonságokkal.
A legbelső doboz, és a szegély közötti kitöltési hely, padding van. Működése a margóéval megegyező.
És végül az egész dobozmodell magja a tartalom (content).

1. Margók

Mint a fent említettem a CSS dobozmodell alapján, a margók e modell legkülső részén vannak.
Befolyásolják az adott elem távolságát annak szomszédos elemeitől.
A margóknak nincs semmilyen látszólagos tulajdonságuk, értékük. Csak méretüket határozhatjuk meg.
Választható tulajdonságaik:

Értékeik:


A valami azonosítójú eleme felső margója 10px, jobb margója 11px, alsó 12px, és a feslő margója 13px.
Százalékos forma:

A felső margó 110 százalékos, a jobb 100 százalékos, az alsó 40, a bal margó 55 százalékos.

2. Szegélyek

A szegélyek (border) a margón belül helyezkednek el. Számos látszólagos tulajdonságuk van.

1. Szélességüket a:

Értéküket megadhatjuk számmal (22px), vagy angol szavakkal.

Ha konkrét szélességet akarunk alkalmazni, ajánlott a számmal való megadás, mert a fenti három érték értelmezése böngészőfüggő.

2. Stílusukat a border-style: tulajdonsággal állíthatjuk be. Itt is, mint az előzőekben lehetőség van a keretek részenkénti beállítására.
Tehát elérhető a border-top-style, border-bottom-style, border-left-style, és a border-right-style is.
Számos értékkel rendelkezik ez a tulajdonság.
Nézzünk párat.

3. A szegélyek színeit a border-color: segítségével változtathatjuk meg. Ebben az esetben külön beállíthatjuk az egyes szegélyek részeit, a top, bottom, left, és right kiegészítés használatával.
Értéke szinte mindig valamilyen hexadecimiális színkód, esetleg angol színnév. Létezik transparent érték is, ami átlátszóvá teszi a szegélyt méretének megtartásával, de nem minden böngésző támogatja.

A szegélytulajdonságoknál lehetőségünk van a fent említett három tulajdonság összevonására.

Előbb a keret szélességét, majd a stílusát és végül a színét határoztuk meg. Alkalmazhatjuk a keret összes részére egyszerre is. Ekkor a border tulajdonságot használjuk.

3. Kitöltés

A padding tulajdonság a tartalom és a szegély közti üres részt határozza meg. Szintén több részre osztható e tulajdonság is.

Értékei megegyeznek a margó értékeivel.

Itt is össze lehet vonni a különböző tulajdonságokat:

Az első érték a felső, a második a jobb, utána az alsó és végül a bal üres hely szélessége.