Margin og padding

Margin og padding, eller “marg og polstring” på norsk, er to grunnleggende og viktige konsepter i CSS som brukes for å kontrollere avstanden rundt elementer.

Innstillingene krever “Avansert modus” aktiv

Kort forklart:

Margin:  Er området rundt et elements ytre kant. Det skaper avstand mellom elementet og andre elementer rundt det. Margin kan være transparent, og bakgrunnsfargen til det underliggende elementet vil vises gjennom.

Padding: Er området innenfor et elements kant, mellom kanten og innholdet (tekst, bilder osv.). Padding øker den totale størrelsen på elementet, og bakgrunnsfargen til elementet fyller padding-området.

Tenk på det slik:

Margin: Som en ramme rundt et bilde. Det skaper avstand mellom bildet og andre elementer.

Padding: Som polstringen inni bilderammen, mellom bildet og selve rammen.

Tilpasse margin og padding

De fleste seksjoner og blokker har støtte for margin og padding.
Disse innstillingene finner man som regel under Generelle innstillinger  hvor de er delt inn i en innstilling for margin og en for padding.

1. Åpne innstillingen for margin/padding

2. Slå på padding for ønsket enhet

3. Juster hvor mye margin/som er ønsket ved å taste inn antall pixel.

“Arve” innstillinger

Om man velger å kun justere innstillingene for desktop (PC) vil de andre enhetene arve innstillingene.
Det vil si at desktop alltid er “sjef”, og med mindre annet er satt vil de mindre enhetene få samme innstillinger.

Om man f.eks ønsker at desktop skal ha 20px i padding men mobil skal ha 0px må man aktivt slå på padding for mobil og sette innstillingene til 0px.

Det betyr også at om alle enheter skal ha samme margin/padding er det nok å gjøre innstillingen på standardvalget for desktop.

Tilpasning per enhet

Tidligere hadde designbyggeren kun støtte for én overordnet margin/padding per seksjon/blokk, men fikk i januar 2025 støtte for unike innstillinger per enhet.

Dette betyr at man svært enkelt kan sørge for at seksjoner og blokker ser bra ut, uansett enhet.
Eksempelvis trenger man kanskje ikke ekstra padding på PC, mens det på mobil kan være fint å få litt ekstra luft rundt elementene.