marginLastnost določa skrajni del modela polje, ki ustvarja prostor okrog elementa, zunaj vseh opredeljenih meja.
Robovi so nastavljeni z uporabo dolžin, odstotkov ali ključne besede autoin imajo lahko negativne vrednosti. Tu je primer:
.box ( margin: 0 3em 0 3em; )margin je stenografska lastnost in sprejema do štiri vrednosti, prikazane tukaj:
.box ( margin: || || || )Če je nastavljenih manj kot štiri vrednosti, se domnevajo, da manjkajoče vrednosti temeljijo na opredeljenih. Na primer, naslednja dva nabora pravil bi dobila enake rezultate:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Če je torej definirana samo ena vrednost, to nastavi vse štiri robove na isto vrednost. Če so navedene tri vrednosti, je margin: (top) (left-and-right) (bottom);.
Vsakega posameznega roba je mogoče prijaviti z uporabo dolgoročnega zapisa, v tem primeru bi na lastnost določili le eno vrednost:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto in centriranje
Vsaka lastnost roba lahko sprejme tudi vrednost auto. Vrednost v autobistvu brskalniku pove, da za vas določi maržo. V večini primerov bo vrednost autoenakovredna vrednosti 0(ki je začetna vrednost za vsako lastnost roba) ali sicer, kar koli prostora je na voljo na tej strani elementa. Vendar autoje priročen za vodoravno centriranje:
.container ( width: 980px; margin: 0 auto; )V tem primeru je treba narediti dve stvari za centriranje tega elementa vodoravno znotraj razpoložljivega prostora:
- Element dobi določeno širino
- Levi in desni rob sta nastavljena na
auto
Brez določene širine autovrednosti v bistvu ne bi imele nobenega učinka, tako da bi levi in desni rob postavili na 0ali pa na kakršen koli razpoložljiv prostor v nadrejenem elementu.
Prav tako je treba poudariti, da autoje koristno samo za vodoravno centriranje, zato uporaba autoza zgornji in spodnji rob ne bo usmerila elementa navpično, kar je za začetnike lahko zmedeno.
Strnjeni robovi
Navpični robovi na različnih elementih, ki se med seboj dotikajo (torej nimajo vsebine, oblazinjenja ali meja, ki jih ločujejo), se bodo zlomili in tvorili en sam rob, ki je enak večjemu od sosednjih robov. To se ne zgodi na vodoravnih robovih (levo in desno), temveč le navpično (zgoraj in spodaj).
Za ponazoritev vzemite naslednji HTML:
Collapsing Margins
Example text.In naslednji CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )V tem primeru ima h2element spodnji rob 20px. Element odstavka, ki mu takoj sledi v viru, ima zgornji rob, nastavljen na 10 slikovnih pik.
Zdi se, da h2zdrava pamet kaže, da bi bila debelina navpičnega roba med odstavkom skupaj 30px (20px + 10px). Toda zaradi propada meje je dejanska debelina 20 px. To je prikazano v vdelanem peresniku spodaj:
Čeprav se zrušeni robovi na prvi pogled zdijo neintuitivni, so dejansko koristni iz nekaj razlogov. Prvič, praznim elementom preprečujejo dodajanje dodatnega, običajno nezaželenega, navpičnega prostora robov.
Drugič, omogočajo bolj dosleden pristop k razglasitvi univerzalnih robov med elementi strani. Na primer, naslovi imajo običajno prostor z navpičnimi robovi, prav tako tudi odstavki. Če se robovi ne bi strnili, bi naslovi, ki sledijo odstavkom (ali obratno), pogosto zahtevali ponastavitev robov na enem od elementov, da bi dosegli dosledno velikost navpičnega razmika.
Tretjič, strnitev roba velja tudi za ugnezdene elemente. Poglejte naslednji peresnik:
Tu ima element odstavka zgornji rob, nastavljen na 30 slikovnih pik, in je ugnezden znotraj divelementa z zgornjim robom 40 slikovnih pik. Poleg tega ima h2element spodnji rob 20 slikovnih pik.
Ponovno zdrava pamet predlaga, da bi bil celotni prostor navpičnega roba tukaj 90px (20px + 40px + 30px), vendar se namesto tega robovi strnejo v en rob 40px (najvišji od treh). To je v večini primerov koristno, ker ni treba ponovno definirati nobenega zgornjega roba, da odstranite odvečni navpični prostor.
Negativne marže
Kot lahko sumite, medtem ko pozitivna vrednost roba odriva druge elemente, bo negativni rob element sam potegnil v to smer ali pa druge elemente proti njemu.
Tu je primer vsebnika z oblazinjenjem in glava h2 ima negativne robove, ki se skozi to oblazinjenje potegnejo nazaj na robove:
Glejte primer
najpogostejše uporabe pisala za negativne robove Chrisa Coyierja (@chriscoyier)
na CodePen.
Tu je primer, ko ima prvi odstavek negativni spodnji rob, zaradi česar se naslednji odstavek potegne navzgor.
Glejte
spodnji odstavek negativnega roba pisala Chrisa Coyierja (@chriscoyier)
na CodePenu.
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Deluje | Deluje | Deluje | Deluje | Deluje | Deluje | Deluje |
IE6 je nagnjen k podvojeni napaki s plavajočim robom, ki jo je v večini primerov mogoče odpraviti z dodajanjem display: inlineplavajočega elementa.