marginSvojstvo definira krajnji vanjski dio kutije modela, stvaranje prostora oko elementa, izvan svake definiranih granica.
Margine se postavljaju pomoću duljina, postotaka ili ključne riječi autoi mogu imati negativne vrijednosti. Evo primjera:
.box ( margin: 0 3em 0 3em; )margin je stenografsko svojstvo i prihvaća do četiri vrijednosti, ovdje prikazane:
.box ( margin: || || || )Ako je postavljeno manje od četiri vrijednosti, vrijednosti koje nedostaju pretpostavljaju se na temelju definiranih. Na primjer, sljedeća dva skupa pravila dobila bi identične rezultate:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Dakle, ako je definirana samo jedna vrijednost, ovo postavlja sve četiri margine na istu vrijednost. Ako su deklarirane tri vrijednosti, jest margin: (top) (left-and-right) (bottom);.
Bilo koja od pojedinačnih margina može se deklarirati pomoću longhanda, u tom biste slučaju definirali samo jednu vrijednost po svojstvu:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto i centriranje
Svako od svojstava margine također može prihvatiti vrijednost auto. Vrijednost u autoosnovi govori pregledniku da definira marginu za vas. U većini slučajeva vrijednost autoće biti jednaka vrijednosti 0(što je početna vrijednost za svako svojstvo margine) ili u suprotnom bilo koji prostor dostupan na toj strani elementa. Međutim, autozgodno je za horizontalno centriranje:
.container ( width: 980px; margin: 0 auto; )U ovom se primjeru rade dvije stvari za centriranje ovog elementa vodoravno u raspoloživom prostoru:
- Element dobiva zadanu širinu
- Lijeva i desna margina postavljene su na
auto
Bez navedene širine autovrijednosti u osnovi ne bi imale učinka, postavljajući lijevu i desnu marginu na 0ili na bilo koji raspoloživi prostor unutar roditeljskog elementa.
Također treba naglasiti da autoje korisno samo za vodoravno centriranje, pa stoga upotreba autoza gornje i donje margine neće usredotočiti element okomito, što za početnike može biti zbunjujuće.
Marže koje se skupljaju
Okomite margine na različitim elementima koji se međusobno dodiruju (tako da ih nema sadržaja, dodataka ili granica koji ih razdvajaju) urušit će se, tvoreći jednu marginu koja je jednaka većoj od susjednih margina. To se ne događa na vodoravnim marginama (lijevo i desno), već samo okomito (gore i dolje).
Za ilustraciju uzmite sljedeći HTML:
Collapsing Margins
Example text.I sljedeći CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )U ovom primjeru h2element ima donju marginu od 20 piksela. Element odlomka, koji ga odmah slijedi u izvoru, ima gornju marginu postavljenu na 10 piksela.
Čini se da zdrav razum sugerira da bi debljina okomite margine između h2i odlomka bila ukupno 30 piksela (20 piksela + 10 piksela). Ali zbog kolapsa margine, stvarna debljina na kraju iznosi 20 piksela. To je prikazano u ugrađenoj olovci u nastavku:
Iako se marže koje se skupljaju na prvi pogled mogu činiti neintuitivnima, zapravo su korisne iz nekoliko razloga. Prvo, sprječavaju prazne elemente da dodaju dodatni, obično nepoželjni, okomiti prostor margina.
Drugo, omogućuju dosljedniji pristup deklariranju univerzalnih margina preko elemenata stranice. Na primjer, naslovi obično imaju okomiti prostor margina, pa tako i odlomci. Ako se margine ne uruše, zaglavlja koja slijede odlomke (ili obrnuto) često će zahtijevati resetiranje margina na jednom od elemenata kako bi se postigla dosljedna količina vertikalnih razmaka.
Treće, kolaps margine također se odnosi na ugniježđene elemente. Pogledajte sljedeću olovku:
Ovdje element odlomka ima gornju marginu postavljenu na 30 piksela i ugniježđen je unutar divelementa s gornjom marginom od 40 piksela. Uz to, h2element ima donju marginu od 20 piksela.
Ponovno, zdrav razum sugerirao bi da bi ovdje ukupni prostor vertikalne margine bio 90 piksela (20 piksela + 40 piksela + 30 piksela), ali umjesto toga margine se sve skupljaju u jednu marginu od 40 piksela (najveću od tri). To je korisno u većini slučajeva jer nema potrebe za redefiniranjem bilo koje gornje margine kako bi se uklonio dodatni okomiti prostor.
Negativne marže
Kao što možda pretpostavljate, dok pozitivna vrijednost margine odguruje ostale elemente, negativna margina povući će sam element u tom smjeru ili povući druge elemente prema njemu.
Evo primjera spremnika s oblogom, a zaglavlje h2 ima negativne margine koje se povlače kroz to podmetanje natrag do rubova:
Pogledajte
slučaj najčešće korištene olovke za negativne margine Chrisa Coyiera (@chriscoyier)
na CodePenu.
Evo primjera gdje prvi odlomak ima negativnu donju marginu, što povlači sljedeći odlomak prema gore.
Pogledajte
negativni rub olovke povlačeći donji odlomak Chrisa Coyiera (@chriscoyier)
na CodePenu.
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Djela | Djela | Djela | Djela | Djela | Djela | Djela |
IE6 je sklon udvostručenoj pogrešci s plutajućom marginom, koja se u većini slučajeva može riješiti dodavanjem display: inlineplutajućeg elementa.