09 - Margó- és szegélytulajdonságok

Top Margin: a felső margó beállítását szolgálja, amely megadható hosszúságértékével, vagy százalékos formában, illetve az auto (automatikus) értékkel. A nulla érték letiltja a margót, és negatív értékeket is lehet használni. A százalékos érték mindig a külső elemre vonatkozik. Pl.

BODY { margin-top: 0 }

Right Margin: a jobboldali margó beállítását szolgálja, amely megadható hosszúságértékével, vagy százalékos formában, illetve az auto (automatikus) értékkel. A nulla érték letiltja a margót, és negatív értékeket is lehet használni. A százalékos érték mindig a külső elemre vonatkozik. Pl.

P.keskeny { margin-right: 50% }

Bottom Margin: az alsó margó beállítását szolgálja, amely megadható hosszúságértékével, vagy százalékos formában, illetve az auto (automatikus) értékkel. A nulla érték letiltja a margót, és negatív értékeket is lehet használni. A százalékos érték mindig a külső elemre vonatkozik. Pl.

DT { margin-bottom: 3em }

Left Margin: a jobboldali margó beállítását szolgálja, amely megadható hosszúságértékével, vagy százalékos formában, illetve az auto (automatikus) értékkel. A nulla érték letiltja a margót, és negatív értékeket is lehet használni. A százalékos érték mindig a külső elemre vonatkozik. Pl.

ADDRESS { margin-left: 50% }

Margin: segítségével a margókat lehet beállítani hosszúságértékükkel vagy százalékosan, illetve az auto érték is használható. Lehetőség van az értékek összevonta megadására, pl.

BODY { margin: 5em } /* mindegyik 5em */ 
P { margin: 2em 4em } /* felső és alsó margók 2em, bal és jobb margók 4em */ 
DIV  { margin: 1em 2em 3em 4em } /* felső margó 1em, jobb margó 2em, alsó margó 3em, bal margó 4em */

Top Padding: a padding-top megadja a felső keret (szegély) és a tartalom közötti távolságot, hosszúságértékkel vagy százalékosan. A százalékos érték mindig a külső elemre vonatkozik negatív értékek nem megengedettek. Right Padding: a padding-right megadja a jobb keret (szegély) és a tartalom közötti távolságot, hosszúságértékkel vagy százalékosan. A százalékos érték mindig a külső elemre vonatkozik negatív értékek nem megengedettek. Bottom Padding: a padding-bottom megadja az alsó keret (szegély) és a tartalom közötti távolságot, hosszúságértékkel vagy százalékosan. A százalékos érték mindig a külső elemre vonatkozik negatív értékek nem megengedettek. Left Padding: a padding-left megadja a bal keret (szegély) és a tartalom közötti távolságot, hosszúságértékkel vagy százalékosan. A százalékos érték mindig a külső elemre vonatkozik negatív értékek nem megengedettek. Padding: az előző tulajdonságok (top-padding, right-padding, bottom-padding, left-padding) összevont megadására használható, pl.

BLOCKQUOTE { padding: 2em 4em 5em }

Top Border Width: a border-top-width segítségével az elem felső szegélyének szélességét lehet beállítani. Lehetséges értékei: thick (vastag), medium (közepes), thin (vékony), vagy szélességértékkel. A negatív értékek nem megengedettek Right Border Width: a border-right-width segítségével az elem jobboldali szegélyének szélességét lehet beállítani. Lehetséges értékei: thick (vastag), medium (közepes), thin (vékony), vagy szélességértékkel. A negatív értékek nem megengedettek. Bottom Border Width: a border-bottom-width segítségével az elem alsó szegélyének szélességét lehet beállítani. Lehetséges értékei: thick (vastag), medium (közepes), thin (vékony), vagy szélességértékkel. A negatív értékek nem megengedettek Left Border Width: a border-left-width segítségével az elem baloldali szegélyének szélességét lehet beállítani. Lehetséges értékei: thick (vastag), medium (közepes), thin (vékony), vagy szélességértékkel. A negatív értékek nem megengedettek Border Width: az előző tulajdonságok (border-top-width, border-right-width, border-bottom-width, border-left-width) összevont megadására használható. Border Color: a szegély színét lehet vele megadni, border-color:szín formátumban. Border Style: a szegély stílusa itt állítható be, értéke lehet: none (nincs), dotted (pontozott), dashed (vonalkázott), solid (vékony vonalas), double (dupla vonalas), roove (vastagabb vonalas), ridge (térhatású), inset (betüremkedő), outset (kitüremkedő). Top Border: a border-top tulajdonsággal egyszerre lehet beállítani az alábbiakat: border-top-width, border-style, color. Right Border: a border-right tulajdonsággal egyszerre lehet beállítani az alábbiakat: border-right-width, border-style, color. Bottom Border: a border-bottom tulajdonsággal egyszerre lehet beállítani az alábbiakat: border-bottom-width, border-style, color. Left Border: a border-left tulajdonsággal egyszerre lehet beállítani az alábbiakat: border-left-width, border-style, color. Border: ezzel a tulajdonsággal egyszerre lehet beállítani az alábbiakat: border-width, border-style, color. Pl.

H2 { border: solid 2em A:active  { border: thick dashed red } A:link    { border: groove yellow } A:visited { border: thin double #ff00ff }

Width: mindegyik blokkszintű, vagy annak megfelelő (pl. IMG, TEXTAREA, OBJECT, INPUT, SELECT) elemnek megadhatunk szélességértéket, százalékos, mértékegységgel megadott vagy automatikus (auto) formátumban. Pl.

INPUT.gomb { width: 10em }

Height: mindegyik blokkszintű, vagy annak megfelelő (pl. IMG, TEXTAREA, OBJECT, INPUT, SELECT) elemnek megadhatunk magasságértéket, százalékos, mértékegységgel megadott vagy automatikus (auto) formátumban.

IMG.kicsi { width: 40px; height: 40px }

Float: a float segítségével az objektumokat "körül lehet folyatni" a szöveggel. Lehetséges értékei: left (bal oldalon), right (jobb oldalon), none (nincs körülfolyatva). Clear: szabályozhatjuk vele, hogy az adott elem mellett lehet-e float tulajdonságú elem. Lehetséges értékei: left (a clear-rel megadott elemet a float tulajdonságú elem alá igazítja, balra), right (a clear-rel megadott elemet a float tulajdonságú elem alá igazítja, jobbra), both (a clear-rel megadott elemet a float tulajdonságú elem alá igazítja), none (engedi, hogy mellette float tulajdonságú elem legyen). A szerző honlapja: http://fodorsi.ini.hu