Den marginegenskap definerer den ytterste delen av esken modellen gir fri plass rundt et element, utenfor eventuelle definerte grenser.
Marger angis ved hjelp av lengder, prosenter eller nøkkelordet autoog kan ha negative verdier. Her er et eksempel:
.box ( margin: 0 3em 0 3em; )margin er en stenografisk eiendom og aksepterer opptil fire verdier, vist her:
.box ( margin: || || || )Hvis det er angitt færre enn fire verdier, antas de manglende verdiene basert på de som er definert. Følgende to regelsett vil for eksempel få identiske resultater:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Dermed, hvis bare en verdi er definert, setter dette alle fire margene til samme verdi. Hvis tre verdier blir deklarert, er det det margin: (top) (left-and-right) (bottom);.
Hvilke som helst av de enkelte marginene kan deklareres ved hjelp av langhånd, i så fall vil du bare definere en verdi per eiendom:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto og sentrering
Hver av marginegenskapene kan også akseptere en verdi på auto. En verdi av autoforteller i utgangspunktet nettleseren å definere margen for deg. I de fleste tilfeller vil en verdi autovære ekvivalent med en verdi på 0(som er den opprinnelige verdien for hver marginegenskap) eller annet plass som er tilgjengelig på den siden av elementet. Er imidlertid autopraktisk for horisontal sentrering:
.container ( width: 980px; margin: 0 auto; )I dette eksemplet gjøres to ting for å sentrere dette elementet horisontalt innenfor den tilgjengelige plassen:
- Elementet får en spesifisert bredde
- Venstre og høyre marg er satt til
auto
Uten den angitte bredden autoville verdiene i det vesentlige ikke ha noen effekt, ved å sette venstre og høyre marg til 0eller annet til det som er ledig plass inne i det overordnede elementet.
Det skal også påpekes at det bare autoer nyttig for horisontal sentrering, og bruk autoav topp- og bunnmargin vil ikke sentrere et element vertikalt, noe som kan være forvirrende for nybegynnere.
Marginer som kollapser
Vertikale marginer på forskjellige elementer som berører hverandre (har dermed ikke noe innhold, polstring eller grenser som skiller dem) vil kollapse og danne en enkelt margin som er lik den største av de tilstøtende margene. Dette skjer ikke på horisontale marginer (venstre og høyre), bare vertikale (øverst og nederst).
For å illustrere, ta følgende HTML:
Collapsing Margins
Example text.Og følgende CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )I dette eksemplet får h2elementet en bunnmargin på 20 px. Avsnittelementet, som umiddelbart følger det i kilden, har en toppmargin satt til 10 piksler.
Sunn fornuft ser ut til å antyde at den vertikale h2margintykkelsen mellom og avsnittet vil være totalt 30 px (20 px + 10 pixel). Men på grunn av marginkollaps blir den faktiske tykkelsen 20 px. Dette vises i den innebygde pennen nedenfor:
Selv om kollapsende marginer ved første øyekast kan virke uintuitive, er de faktisk nyttige av noen grunner. For det første forhindrer de at tomme elementer legger til ekstra, vanligvis uønsket, vertikal marginplass.
For det andre tillater de en mer konsistent tilnærming til å erklære universelle marginer på tvers av sideelementer. For eksempel har overskrifter ofte loddrett margplass, og det samme gjør avsnitt. Hvis margene ikke kollapset, vil overskrifter som følger avsnitt (eller omvendt) ofte kreve at du nullstiller marginene på et av elementene for å oppnå en jevn mengde vertikal avstand.
For det tredje gjelder marginkollaps også nestede elementer. Se på følgende penn:
Her har avsnittelementet en toppmargin satt til 30 px, og er nestet inne i et divelement med en toppmargin på 40 px. I tillegg har h2elementet en bunnmargin på 20 px.
Igjen vil sunn fornuft antyde at det totale vertikale marginområdet her ville være 90px (20px + 40px + 30px), men i stedet kollapser margene til en enkelt 40px margin (den høyeste av de tre). Dette er nyttig i de fleste tilfeller siden det ikke er behov for å omdefinere noen av de øverste margene for å fjerne den ekstra vertikale plassen.
Negative marginer
Som du kanskje mistenker, mens en positiv marginverdi skyver andre elementer bort, vil en negativ margin enten trekke selve elementet i den retningen, eller trekke andre elementer mot det.
Her er et eksempel på en container med polstring, og overskriften h2 har negative marginer som trekker seg gjennom polstringen tilbake til kantene:
Se pennens
mest brukte sak for negative marginer av Chris Coyier (@chriscoyier)
på CodePen.
Her er et eksempel der første avsnitt har en negativ bunnmargin, som trekker neste avsnitt opp mot.
Se Pen
Negative Margin som trekker bunnavsnittet av Chris Coyier (@chriscoyier)
på CodePen.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Virker | Virker | Virker | Virker | Virker | Virker | Virker |
IE6 er utsatt for den doblede float-margin bug, som kan løses i de fleste tilfeller ved å legge display: inlinetil det flytende elementet.