Den marginegenskab definerer den yderste del af boksmodellen, skabe rum omkring et element uden for eventuelle definerede grænser.
Margener indstilles ved hjælp af længder, procenter eller nøgleordet autoog kan have negative værdier. Her er et eksempel:
.box ( margin: 0 3em 0 3em; )margin er en stenografisk egenskab og accepterer op til fire værdier, vist her:
.box ( margin: || || || )Hvis der er indstillet færre end fire værdier, antages de manglende værdier baseret på de definerede værdier. Følgende to regelsæt får for eksempel identiske resultater:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Således, hvis kun en værdi er defineret, indstiller dette alle fire margener til den samme værdi. Hvis der erklæres tre værdier, er det margin: (top) (left-and-right) (bottom);.
Enhver af de enkelte margener kan deklareres ved hjælp af langhånd, i hvilket tilfælde du kun definerer en værdi pr. Ejendom:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto og centrering
Hver af margenegenskaberne kan også acceptere en værdi på auto. En værdi af autofortæller grundlæggende browseren at definere margenen for dig. I de fleste tilfælde autosvarer en værdi til til en værdi af 0(som er den oprindelige værdi for hver margenegenskab) ellers uanset hvilken plads der er tilgængelig på den side af elementet. Men autoer praktisk til vandret centrering:
.container ( width: 980px; margin: 0 auto; )I dette eksempel udføres to ting for at centrere dette element vandret inden for det tilgængelige rum:
- Elementet får en specificeret bredde
- Venstre og højre margen er indstillet til
auto
Uden den specificerede bredde autoville værdierne i det væsentlige ikke have nogen effekt, idet de venstre og højre margener blev indstillet til 0ellers det, der er ledigt rum inde i det overordnede element.
Det skal også påpeges, at autodet kun er nyttigt til vandret centrering, og brug af autotil top- og bundmargener vil ikke centrere et element lodret, hvilket kan være forvirrende for begyndere.
Margener, der kollapser
Lodrette margener på forskellige elementer, der berører hinanden (har således intet indhold, polstring eller grænser, der adskiller dem) vil kollapse og danne en enkelt margen, der er lig med den største af de tilstødende margener. Dette sker ikke i vandrette margener (venstre og højre), kun lodrette (øverst og nederst).
For at illustrere skal du tage 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 eksempel får h2elementet en bundmargen på 20 pixel. Afsnitselementet, der straks følger det i kilden, har en topmargen indstillet til 10 pixel.
Sund fornuft synes at antyde, at den lodrette h2margintykkelse mellem og afsnittet vil være i alt 30 pixel (20 pixel + 10 pixel). Men på grund af marginkollaps ender den faktiske tykkelse med at være 20 pixel. Dette demonstreres i den indlejrede pen nedenfor:
Selvom kollapsende margener ved første øjekast kan virke uintuitive, er de faktisk nyttige af nogle få grunde. For det første forhindrer de, at tomme elementer tilføjer ekstra, som regel uønsket, lodret margenrum.
For det andet giver de mulighed for en mere konsekvent tilgang til at erklære universelle margener på tværs af sideelementer. For eksempel har overskrifter ofte lodret margenrum, og det samme gælder afsnit. Hvis margener ikke kollapsede, ville overskrifter, der følger afsnit (eller omvendt), ofte kræve at nulstille margenerne på et af elementerne for at opnå en ensartet lodret afstand.
For det tredje gælder marginkollaps også for indlejrede elementer. Se på følgende pen:
Her har afsnitselementet en topmargen indstillet til 30 pixel og er indlejret i et divelement med en topmargen på 40 pixel. Derudover har h2elementet en bundmargen på 20 pixel.
Igen vil sund fornuft antyde, at det samlede lodrette margenrum her ville være 90 pixel (20 pixel + 40 pixel + 30 pixel), men i stedet kollapser marginerne alle sammen til en enkelt 40 pixel margen (den højeste af de tre). Dette er nyttigt i de fleste tilfælde, da der ikke er behov for at omdefinere nogen af de øverste margener for at fjerne det ekstra lodrette rum.
Negative margener
Som du måske har mistanke om, mens en positiv margenværdi skubber andre elementer væk, vil en negativ margen enten trække selve elementet i den retning eller trække andre elementer mod det.
Her er et eksempel på en container med polstring, og overskriften h2 har negative margener, der trækker sig gennem den polstring tilbage til kanterne:
Se
pennens mest almindelige brugssag for negative margener af Chris Coyier (@chriscoyier)
på CodePen.
Her er et eksempel, hvor første afsnit har en negativ bundmargen, som trækker det næste afsnit op mod.
Se Pen
Negative Margin, der trækker det nederste afsnit af Chris Coyier (@chriscoyier)
på CodePen.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbejder | Arbejder | Arbejder | Arbejder | Arbejder | Arbejder | Arbejder |
IE6 er tilbøjelig til den fordoblede float-margin bug, som i de fleste tilfælde kan løses ved at tilføje display: inlinedet flydende element.