Zamiki (ang. Margins)

CSS Margins, kateremu bi najboljši prevod bil zamiki, ker z Margins lahko HTML element zamaknemo ali premaknemo, kamorkoli želimo. Gor, dol, levo ali desno na spletni strani. Z zamiki se dela ogromno, ker dosti stvari, sploh ko začneš delati z atributi kot so code, textarea in podobni, potrebuješ elemente premikati, ali zamikati.

Zamiki (ang. Margins)

CSS Margins imajo lastnosti za dodajanje zamikov na vsaki strani posebej, predstavljeni v seznamu.

margin-top

margin-right

margin-bottom

margin-left

Vse te štiri lastnosti pa imajo sledeče vrednosti:

Vrednost OPIS
auto brskalnik izračuna margin samostojno in prilagodi na spletni strani
length določimo margin v px, pt ali cm
% margins določimo v odstotkih
inherit določi, da morajo zamiki biti določeni od parent elementa

CSS Margins vsebuje samodejno vrednost (auto value), ki jo lahko nastavimo tako, da samodejno vodoravno centrira element znotraj njegovega kontejnerja (div). HTML element bo nato prevzel določeno širino, preostali prostor pa bo enakomerno razdeljen med levim in desnim robom. Zgornji in spodnji zamik (ang. Margin) HTML elementov sta združeni v en odmik, ki je enak največjemu od obeh. To se nikoli ne zgodi na levem in desnem robu, vedno samo na zgornjem in spodnjem.

Heading

Heading

Heading

Oglej si še div

Želim pokazati, kaj sploh Margin je. To je v bistvu koliko pikslov je oddaljen od strani zaslona, naj bo to zgoraj, spodaj, levo ali desno.

GLAVA h4

GLAVA h5

V primeru ima element h1 spodnji rob 50px, element h2 pa zgornjega 20px. Tako bi moral biti vertikalni margin med h1 in h2 70px (50px + 20px), ker pa se je margin zrušil, dejansko znaša na koncu 50px.

Poglej si div element, ki ima zgornjo mejo 100px, spodnjo 100px, levo 80px in desno 150px

Inherit primer

Levi rob je podedovan od parent elementa.

Ta paragraph je podedoval levi rob od div elementa.

Zdravo svet!

Heading

Heading

Heading

Oglejte si še div

Želim ti pokazati, kaj sploh Margin je. To je v bistvu koliko pikslov je oddaljen od strani zaslona, naj bo to zgoraj, spodaj, levo ali desno.

Za vpogled v kodo pritisni F12 za prikaz konzole, in v Elements (Google Chrome) se to lepo vidi.