Layout: Margin og padding

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

Innstillingene krever “Avansert modus” aktiv

Kort forklart

Margin er området rundt kanten av et element og gir avstand mellom dette elementet og andre omkringliggende elementer. Margin kan være gjennomsiktig, slik at bakgrunnsfargen til elementet under vises gjennom.

Padding er området innenfor elementets kant, mellom kanten og innholdet som tekst eller bilder. Padding øker elementets totale størrelse, og elementets bakgrunnsfarge fyller padding-området.

Tenk på det slik:

Margin: Du har to bilder på veggen. Margin er det som bestemmer avstanden mellom hver bilderamme.

Padding: Som et passepartout inni bilderammen, som legger seg mellom bildet og selve rammen.

Tilpasse margin og polstring

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.

Åpne innstillingen for margin/padding
Slå på padding for ønsket enhet
Juster hvor mye margin/som er ønsket ved å taste inn antall pixel.

“Arve” innstillinger

Hvis du kun justerer innstillingene for desktop (PC), vil de andre enhetene automatisk arve disse innstillingene. Desktop fungerer som "sjefen", og mindre enheter vil ha de samme innstillingene med mindre noe annet er spesifisert. For eksempel, hvis du ønsker at desktop skal ha 20px padding, men mobil skal ha 0px, må du aktivt skru på padding for mobil og sette den til 0px. Hvis alle enheter skal ha samme margin/padding, er det tilstrekkelig å gjøre justeringen i standardinnstillingene for desktop.

Tilpasning per enhet

Tidligere støttet designbyggeren kun én felles margin/padding per seksjon eller blokk. I januar 2025 ble det imidlertid mulig å sette unike innstillinger for hver enhet.