Elementene på nettsiden din ligger klemt inntil hverandre. Kortene har fått padding og border, men det er ingen luft mellom dem. Alt ser trangt og rotete ut. Margin i CSS gir deg avstand utenfor et element, slik at innholdet får pusterom. Mens padding skaper plass inni boksen, skyver margin andre elementer bort fra utsiden. Det er forskjellen som avgjør om layouten føles ryddig eller klemt.
Fire sider, fire margin-egenskaper
Du kan sette margin på hver side av et element med egne egenskaper: margin-top, margin-right, margin-bottom og margin-left. Hver egenskap tar en lengdeverdi, for eksempel pikseler eller prosent. I videoleksjonen legges det til 30 pikseler topp og bunn, og 10 pikseler på sidene. Når to elementer med samme klasse ligger ved siden av hverandre, summeres marginen mellom dem: 10 pikseler fra det ene pluss 10 fra det andre gir 20 pikseler total avstand horisontalt.
Margin-shorthand med en til fire verdier
Akkurat som med padding har margin en shorthand-egenskap. Antall verdier du skriver bestemmer hvilke sider som påvirkes:
- En verdi setter lik margin på alle fire sider
- To verdier setter den første for topp og bunn, den andre for venstre og høyre
- Tre verdier setter topp, deretter horisontalt, deretter bunn
- Fire verdier følger klokken: topp, høyre, bunn, venstre
Fire-verdi-metoden er den mest eksplisitte. Som instruktøren nevner i videoen, er dette metoden han bruker oftest fordi det er tydelig hvilken side som får hvilken verdi. Du slipper å huske rekkefølgen for to- og tre-verdi-variantene.
Margin collapse: når marginer ikke summeres
Horisontalt legges marginer sammen som forventet. Men vertikalt skjer noe overraskende: når to blokkelementer ligger over hverandre, summeres ikke marginene. I stedet brukes bare den største av de to. Har det ene elementet 30 pikseler margin-bottom og det neste 20 pikseler margin-top, blir avstanden 30 pikseler, ikke 50. Dette kalles margin collapse.
Margin collapse gjelder bare vertikale marginer mellom blokkelementer i normal flyt. Det skjer ikke horisontalt, og det skjer ikke inne i flexbox-containere. Å kjenne til denne oppførselen sparer deg for mye feilsøking når elementer ikke får den avstanden du forventet.
Sentrering med margin auto
En av de mest brukte teknikkene med margin er margin: 0 auto. Når du setter venstre og høyre margin til auto på et blokkelement med en definert bredde, fordeler nettleseren gjenværende plass likt på begge sider. Resultatet er at elementet sentreres horisontalt. Uten en eksplisitt bredde fyller blokkelementet hele bredden, og det er ingen restplass å fordele. Auto fungerer bare horisontalt. For vertikal sentrering trenger du andre teknikker.
Negative marginer
I motsetning til padding kan margin ha negative verdier. En negativ margin trekker elementet i den retningen. Setter du margin-top til en negativ verdi, flyttes elementet oppover og overlapper innholdet over seg. Dette er en teknikk du bør bruke med forsiktighet, men den kan løse spesifikke layoutproblemer der du trenger å justere et elements posisjon uten å endre HTML-strukturen.
Margin og boksmodellen
Margin er det ytterste laget i boksmodellen. Rekkefølgen fra innerst til ytterst er innhold, padding, border og margin. En viktig detalj: margin er alltid gjennomsiktig. Du kan ikke gi margin en bakgrunnsfarge. Bakgrunnsfargen stopper ved border, og marginområdet viser alltid bakgrunnen til forelderelementet. Du kan utforske hvordan margin påvirker layouten videre i MDN sin dokumentasjon om margin.
Lær mer om margin i CSS med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du:
- Hvordan du bruker utviklerverktøy for å inspisere margin visuelt
- Hvordan margin collapse fungerer i praksis med konkrete eksempler
- Hvordan margin og padding samarbeider for å skape gode layouter
