Margin och padding

Margin och padding är två grundläggande och viktiga begrepp inom CSS som används för att styra avståndet runt element.

Inställningarna kräver att "Avancerat läge" är aktiverat

Kortfattat:

Margin: Är området runt den yttre kanten av ett element. Det skapar avstånd mellan elementet och andra element runt det. Marginalen kan vara genomskinlig och bakgrundsfärgen för det underliggande elementet kommer att synas igenom.

Padding: Är området inom kanten av ett element, mellan kanten och innehållet (text, bilder osv.). Padding ökar objektets totala storlek och objektets bakgrundsfärg fyller utfyllnadsområdet.

Tänk på det så här:

Margin: Som en ram runt en bild. Det skapar distans mellan bilden och andra element.

Padding: Som utfyllnaden inuti bildramen, mellan bilden och själva ramen.

Anpassa marginal och padding

De flesta sektioner och block har stöd för marginal och utfyllnad.
Dessa inställningar finns vanligtvis under Generella inställningar  där de är uppdelade i en inställning för margin och en för padding.

1. Öppna inställningen för margin/padding

2. Aktivera margin/padding för önskad enhet

3. Justera hur mycket margin/padding som önskas genom att ange antalet pixlar.

"Ärv"-inställningar

Om du väljer att bara justera inställningarna för desktop (PC) kommer de andra enheterna att ärva inställningarna.
Det vill säga, desktop är alltid "boss", och om inget annat är inställt kommer de mindre enheterna att få samma inställningar.

Om du till exempel vill att desktop ska ha 20px i padding men mobilen ska ha 0px, måste du aktivt aktivera padding för mobil och ställa in inställningarna till 0px.

Det betyder också att om alla enheter ska ha samma margin/padding så räcker det med att göra inställningen till standardvalet för desktop.

Anpassning per enhet

Tidigare hade designverktyget endast stöd för en total margin/padding per sektion/block, men i januari 2025 fick den stöd för unika inställningar per enhet.

Det innebär att du mycket enkelt kan se till att sektioner och block ser bra ut, oavsett enhet.
Till exempel kanske du inte behöver extra padding på en dator, medan det på mobilen kan vara skönt att få lite extra luft runt elementen.