marginVara määratletakse äärepoolseimate osa kasti mudel, luues ruumi ümber element, väljaspool mis tahes määratud piirides.
Veerised määratakse pikkuse, protsendi või märksõna alusel autoja neil võivad olla negatiivsed väärtused. Siin on näide:
.box ( margin: 0 3em 0 3em; )margin on lühike omadus ja aktsepteerib kuni nelja väärtust, mis on siin näidatud:
.box ( margin: || || || )Kui määratakse vähem kui neli väärtust, võetakse puuduvad väärtused määratletud väärtuste põhjal. Näiteks saavad järgmised kaks reeglistikku identsed tulemused:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Seega, kui on määratletud ainult üks väärtus, määrab see kõik neli veerist samale väärtusele. Kui deklareeritakse kolm väärtust, siis on margin: (top) (left-and-right) (bottom);.
Kõiki üksikuid veeriseid saab deklareerida pikakäelise abil. Sel juhul määratleksite ühe omaduse kohta ainult ühe väärtuse:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto ja tsentreerimine
Iga veerise omadus võib aktsepteerida ka väärtust auto. Väärtus autoütleb brauserile põhimõtteliselt teie jaoks varu määramise. Enamasti on väärtus väärtus autosamaväärne väärtusega 0(mis on iga margi omaduse algväärtus) või muuga, mis on elemendi sellel küljel saadaval. Siiski autoon see horisontaalse tsentreerimise jaoks mugav:
.container ( width: 980px; margin: 0 auto; )Selles näites tehakse selle elemendi horisontaalseks vabas ruumis tsentreerimiseks kaks asja:
- Elemendile antakse määratud laius
- Vasak ja parem veeris on seatud väärtusele
auto
Ilma määratud laiuseta autoei oleks väärtustel sisuliselt mingit mõju, seades vasakule ja paremale veerisele 0vanemelemendi sees oleva vaba ruumi.
Samuti tuleks märkida, et see autoon kasulik ainult horisontaalse tsentreerimise jaoks ja nii ei kasuta autoülemise ja alumise veerise kasutamine elementi vertikaalselt, mis võib algajatele segadust tekitada.
Varisevad varjud
Erinevate üksteist puudutavate elementide vertikaalsed veerised (seega pole neil sisu, polstrit ega neid eraldavaid piire) varisevad kokku, moodustades ühe veerise, mis võrdub külgnevate veeriste suurematega. Seda ei juhtu horisontaalsetes veeristes (vasakul ja paremal), ainult vertikaalselt (üleval ja all).
Illustreerimiseks võtke järgmine HTML:
Collapsing Margins
Example text.Ja järgmine CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )Selles näites antakse h2elemendile alumine veeris 20px. Lõiguelemendil, mis järgneb sellele kohe allikas, on ülemise veerise suurus 10 pikslit.
Terve mõistus näib viitavat sellele, et vertikaalse veerise paksus h2ja lõigu vahel oleks kokku 30 pikslit (20 pikslit + 10 pikslit). Kuid veerise kokkuvarisemise tõttu on tegelik paksus 20 pikslit. Seda näitab allolev sisseehitatud pliiats:
Ehkki varisevad veerised võivad esmapilgul tunduda ebaotstarbekad, on need tegelikult mõnel põhjusel kasulikud. Esiteks takistavad need tühjadel elementidel täiendava, tavaliselt ebasoovitava vertikaalse veerisruumi lisamist.
Teiseks võimaldavad need järjepidevamat lähenemisviisi universaalsete veeriste deklareerimiseks leheelementide vahel. Näiteks pealkirjadel on tavaliselt vertikaalne veerisruum ja nii on ka lõikudel. Kui veerised ei kukuks kokku, nõuaks lõikudele järgnevad pealkirjad (või vastupidi) sageli vertikaali lähtestamist ühel elemendil, et saavutada püsiv vertikaalne vahe.
Kolmandaks, veeriste ahendamine kehtib ka pesastatud elementide kohta. Vaadake järgmist pliiatsit:
Siin on lõiguelemendi ülemine veeris 30x ja see on sisestatud divelemendi sisse, mille ülemine veeris on 40 pikslit. Lisaks on h2elemendi alumine veeris 20px.
Jällegi, terve mõistus viitab sellele, et kogu vertikaalse veeruumi ruum oleks siin 90 pikslit (20 pikslit + 40 pikslit + 30 pikslit), kuid selle asemel varisevad kõik veerised üheks 40 piksliseks (neist kolmest suurim). See on enamikul juhtudel kasulik, kuna ekstra vertikaalse ruumi eemaldamiseks pole vaja ühtegi ülemist veerist uuesti määratleda.
Negatiivsed marginaalid
Nagu võite arvata, tõmbab positiivne veerise väärtus teisi elemente eemale, kuid negatiivne varu kas tõmbab elemendi ennast selles suunas või teisi elemente selle poole.
Siin on näide polstriga konteinerist ja päisel h2 on negatiivsed veerised, mis tõmbavad end selle polsterduse kaudu tagasi äärtesse:
Vaadake
Chris Coyieri (@chriscoyier)
pliiatsi CodePen lehel negatiivsete marginaalide kõige tavalisemat kasutamist .
Siin on näide, kus esimesel lõigul on negatiivne alumine veeris, mis tõmbab järgmise lõigu vastu.
Vaadake
Chris Coyieri (@chriscoyier) pliiatsi negatiivse marginaali tõmbamise alumist lõiku
CodePenis.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Töötab | Töötab | Töötab | Töötab | Töötab | Töötab | Töötab |
IE6 on altid kahekordistunud ujukmarginaaliveale, mille saab enamikul juhtudel lahendada display: inlineujukelemendile lisamisega .