Layout: marge en opvulling gebruiken
Marge en opvulling op secties en blokken
Marge en opvulling zijn twee fundamentele en concepten in CSS die gebruikt worden om de ruimte rondom elementen te bepalen.
Kort uitgelegd:
Marge: Dit is het gebied rondom de buitenrand van een element. Het creëert afstand tussen het element en andere elementen eromheen. Marge is transparant, waardoor de achtergrondkleur van het onderliggende element zichtbaar blijft.
Opvulling: Dit is het gebied binnen de rand van een element, tussen de rand en de inhoud (zoals tekst, afbeeldingen, enzovoort). Opvulling vergroot de totale grootte van het element en wordt opgevuld met de achtergrondkleur van het element.
Zie het zo:
- Marge: Stel je twee fotolijsten aan de muur voor. De marge bepaalt de afstand tussen elke fotolijst.
- Opvulling (padding): De ruimte binnen de fotolijst, tussen de foto en de lijst zelf.
Marge en opvulling aanpassen
De meeste secties en blokken ondersteunen marge en opvulling. Deze instellingen zijn meestal te vinden onder Algemene instellingen ,waar ze zijn verdeeld in een instelling voor marge en een voor opvulling.
Stappen om marge en opvulling aan te passen:
- Open de marge-/opvulling-instellingen.
- Schakel opvulling in voor het gewenste apparaat
- Pas de gewenste marge/opvulling aan door het aantal pixels (px) in te voeren.
"Overerven" instellingen
Als je ervoor kiest om alleen de instellingen voor desktop(pc) aan te passen, zullen de andere apparaten deze instellingen overnemen. Dit betekent dat de desktop altijd leidend is, en tenzij anders ingesteld, zullen kleinere apparaten dezelfde instellingen gebruiken.
Voorbeeld: Wil je op de desktop 20px opvulling, maar op mobiel 0px? Dan moet je opvulling actief aanzetten voor mobiel en deze op 0px zetten.
Als alle apparaten dezelfde marge of opvulling moeten krijgen, is het voldoende om alleen de desktopinstelling aan te passen.
Aanpassing per apparaat
Voorheen ondersteunde de Design Builder slechts één algemene marge- en opvulling-instelling per sectie of blok, maar sinds januari 2025 is het mogelijk om unieke instellingen per apparaat in te stellen.
Hierdoor zorg je er eenvoudig voor dat secties en blokken er goed uitzien, ongeacht het apparaat. Bijvoorbeeld: op een pc heb je misschien geen extra opvulling nodig, terwijl het op een mobiel scherm prettig kan zijn om wat extra ruimte rondom de elementen te creëren.