Layout: margin en padding gebruiken

Marge en padding op secties en blokken

Marge en padding zijn twee fundamentele en belangrijke concepten in CSS die worden gebruikt om de ruimte rond elementen te bepalen.

Kort uitgelegd:

Marge: Is het gebied rond de buitenrand van een element. Het creëert afstand tussen het element en andere elementen eromheen. De marge kan transparant zijn en de achtergrondkleur van het onderliggende element zal doorschijnen.

Padding: Is het gebied binnen de rand van een element, tussen de rand en de inhoud (tekst, afbeeldingen, enz.). Padding vergroot de totale grootte van het element en de achtergrondkleur van het element vult het paddinggebied.

Zie het zo:

Marge: Stel je twee fotolijsten aan de muur voor. De marge bepaalt de afstand tussen elke fotolijst.

Padding: Zoals de padding in de fotolijst, tussen de foto en de lijst zelf.

Marge en padding aanpassen

De meeste secties en blokken ondersteunen marge en padding. Deze instellingen zijn meestal te vinden onder Algemene instellingen waar ze zijn verdeeld in een instelling voor marge en een voor padding.

Open de marge-/paddinginstelling

Schakel padding in voor het gewenste apparaat

Pas de gewenste marge/padding aan door het aantal pixels in te voeren.

"Overerven" instellingen

Als je ervoor kiest om alleen de instellingen voor desktop (pc) aan te passen, zullen de andere apparaten de instellingen overerven (ook wel, inherit genoemd). Dat wil zeggen dat de desktop altijd de "baas" is en, tenzij anders ingesteld, de kleinere apparaten dezelfde instellingen zullen hebben.

Als je bijvoorbeeld wilt dat de desktop 20px padding heeft maar de mobiel 0px, moet je actief padding inschakelen voor de mobiel en de instellingen op 0px zetten.

Het betekent ook dat als alle apparaten dezelfde marge/padding moeten hebben, het voldoende is om de instelling te maken op de standaardkeuze voor desktop.

Aanpassing per apparaat

Voorheen ondersteunde de Design Builder slechts één algemene marge/padding per sectie/blok, maar in januari 2025 werd ondersteuning voor unieke instellingen per apparaat toegevoegd.