margin

Določa debelino (nevidnega) roba okoli elementa. Ta rob definiramo, kadar želimo predpisati, koliko naj bodo posamezni elementi razmaknjeni.

Margin določa minimalni razmak med elementom in sosednjimi elementi in se ne sešteva. Ker se HTML elementi navadno stikajo vertikalno, boste to lastnost navadno opazili pri zgornjem in spodnjem razmaku, ne pa pri levem ali desnem, ki sta navadno neodvisna od drugih elementov.

Lahko uporabljamo tudi negativne vrednosti, tako da se elementi prekrivajo.

Lastnost margin ja bljižnica za nastavitve margin-bottom, margin-right in/ali margin-top nastavitve v samo enojni deklaraciji.

vrednost	opis	NN	IE	CSS
1 (dolžina ali odstotek)	Če je navedena ena sama vrednost, bo ta veljala za vse štiri robove.	4	4	1
1 2 (dolžina ali odstotek)	Če se navede dve vrednosti, bo prva veljala za zgornji in spodnji rob, druga pa za levi in desni rob.	4	4	1
1 2 3 (dolžina ali odstotek)	Če se navede tri vrednosti, bo prva veljala za zgornji rob, druga za levi in desni rob, tretja pa za spodnji rob.	4	4	1
1 2 3 4 (dolžina ali odstotek)	Če navedemo vse štiri vrednosti, bo prva valjala za zgornji rob, druga za desni rob, tretja za spodnji rob, četrta pa za levi rob	4	4	1

Primeri

body  { margin: 10px }
      /* vsi robovi 10px */
body  { margin: 10px 15px }
      /* top & bottom = 10px, right & left = 15px */
div.x { margin: 10px 15px 20px }
      /* top = 10px, right & left = 15px, bottom = 20px */
img   { margin: 10px 15px 20px 15px }
      /* top = 10px, right = 15px, bottom = 20px, left = 15px */

margin-bottom/margin-right/margin-top/margin-left

Določajo lastnosti za posamezne robove

vrednost	opis	NN	IE	CSS
dolžina	Dolžinska vrednost je lahko v katera koli od sedmih vrednosti.	4	4	1
odstotek	Odstotkovna vrednost je zasnovana na celotno širino, ki je definirana kot 100%.	4	4	1
auto	Avtomatična vrednost uravnava brskalnik, da avtomatično izračuna vse štiri robove. Pri vrednosti `auto` ste zagotovi, da vsaka prejšnja deklaracija ne bo vplivala na robove.	4	4	1

Primeri

body  { margin-left: 10px; margin-right:40px }
body  { margin-top: 15px }
img   { margin: 10px; margin-right:15px }

→ Primeri robov

Gor e-gradiva CSS primeri Površine padding

SERŠ Maribor : Strokovna gimnazija : 2004 : Neven Šrok

e-gradiva	HTML	CSS	JavaScript	Načrtovanje

			SERŠ Maribor		Iskanje	Primeri