Samenvatting
Margin en padding lijken simpele schuifjes, maar in echte supportcases zijn ze vaak de oorzaak van verschoven knoppen, “gaten” tussen secties, afgebroken mobiele lay-outs en inconsistent gedrag tussen pagina’s. In Mach3Blocks werkt spacing op meerdere niveaus tegelijk: Blok, Container, Rij, Kolom en Element. Daardoor krijg je stapeling van ruimte als je zonder diagnose op meerdere plekken corrigeert. Dit artikel laat je spacing professioneel aanpakken: eerst oorzaak lokaliseren, dan gericht corrigeren, en pas daarna fijn afstemmen per apparaat.
Wanneer gebruik je dit?
Gebruik dit artikel wanneer je deze klachten hoort:
- “Er zit ineens veel te veel witruimte boven de knop.”
- “Op desktop is de afstand goed, op mobiel valt alles uit elkaar.”
- “Twee blokken die hetzelfde zouden moeten zijn zien er toch anders uit.”
- “Na kleine aanpassingen is de hele pagina onrustig geworden.”
Hoe werkt dit in Mach3Blocks?
In Mach3Blocks is spacing nooit één enkel getal. De zichtbare ruimte is meestal de som van meerdere waarden:
- buitenruimte (margin) van element en/of kolom;
- binnenruimte (padding) van element, kolom, container of blok;
- breakpoint-specifieke overrides;
- eventuele blokspecifieke afwijkingen t.o.v. thema.
Daarom moet je altijd antwoorden op deze vraag vóór je wijzigt: waar wordt de ruimte echt opgebouwd?
Als je dat niet eerst bepaalt, krijg je klassieke “compensatie-aanpassingen”: je haalt links 16px weg, voegt rechts 12px toe, en een collega herstelt later mobiel met nóg een override. Het werkt dan tijdelijk, maar schaalbaarheid verdwijnt.
--alert variant:warning title:"Kernprincipe"--
Spacing-problemen los je niet op door blind aan één element te trekken. Je lost ze op door de opbouw van ruimte per hiërarchielaag te ontleden en alleen de oorzaaklaag aan te passen.
--/alert--
Welke rechten heb je nodig?
Je past opmaak aan, dus je hebt het recht Websites/presentaties stijlen nodig. Zie je de opmaak-opties niet, of kun je niet opslaan? Dan ontbreekt dat recht — vraag je beheerder om toegang.
Waar klik je precies?
Gebruik deze route als standaardprocedure:
- Open de betreffende pagina in de editor.
- Zet de weergave op Desktop in de bovenste toolbar.
- Selecteer het element waarbij je een spacingprobleem ziet (bijv. knop, tekst of afbeelding).
- Open rechts Opmaak en noteer de huidige margin/padding-waarden.
- Ga via elementselectie onderin naar Kolom, daarna Rij, daarna Container, daarna Blok.
- Noteer op elk niveau alleen de waarden die ruimte beïnvloeden.
- Bepaal op welk niveau de overtollige of ontbrekende ruimte ontstaat.
- Corrigeer eerst dat ene niveau.
- Herhaal controle op Tablet en Telefoon staand.
- Pas alleen breakpoint-overrides toe waar echt nodig.
Supportflow (symptoom → diagnose → actie → verwacht resultaat)
Symptoom 1: “Er zit te veel ruimte boven één CTA-knop”
Diagnose
- Vaak staat er zowel elementmargin als kolompadding actief.
- Soms heeft alleen mobiel een extra topmargin override.
Actie
- Selecteer de CTA-knop (elementniveau).
- Controleer boven- en ondermargin op element.
- Selecteer de bovenliggende kolom en controleer top/bottom padding.
- Vergelijk desktop en mobiel apart.
- Verwijder dubbelop spacing: kies één eigenaar van de ruimte (bijv. kolom, niet ook element).
Verwacht resultaat
- De CTA sluit visueel correct aan op tekst erboven.
- Geen onverwachte extra ruimte op mobiel.
Symptoom 2: “Twee vergelijkbare kaarten hebben verschillende tussenruimtes”
Diagnose
- Eén kaart gebruikt lokale elementpadding, de andere vertrouwt op kolomspacing.
- Of één kaart heeft een oude override op blokniveau.
Actie
- Selecteer kaart A en kaart B.
- Vergelijk spacing per hiërarchieniveau, niet alleen op element.
- Kies één patroon (bijv. kaart-padding op element, verticale ruimte op rij).
- Harmoniseer instellingen tussen beide kaarten.
- Controleer desktop/tablet/mobiel.
Verwacht resultaat
- Kaarten hebben consistente verticale en horizontale ritmiek.
- Toekomstige wijzigingen worden voorspelbaar.
Symptoom 3: “Op mobiel stapelen onderdelen met enorme gaten ertussen”
Diagnose
- Mobiele overrides op meerdere niveaus tegelijk.
- Kolommen die op mobiel 100% breed worden maar oude spacing meenemen.
Actie
- Zet weergave op Telefoon staand.
- Controleer eerst kolom- en rijspacing.
- Zet mobiele waarden terug naar een coherent basispatroon.
- Voeg alleen per element uitzonderingen toe als functioneel nodig.
- Test daarna op tablet om te voorkomen dat je tussenformaat breekt.
Verwacht resultaat
- Rustige mobiele flow zonder “luchtballonnen” tussen onderdelen.
- Desktop blijft intact.
--alert variant:info title:"Werkvolgorde"--
Begin bij structurele spacing (blok/container/rij/kolom) en eindig bij details (element). Zo voorkom je dat je elke nieuwe pagina opnieuw moet repareren.
--/alert--
Praktijkvoorbeelden (before/after)
Voorbeeld 1 — Landingspagina met hero + voordelen + CTA
Before
- Hero ziet goed uit.
- Tussen voordelen en CTA zit op mobiel bijna een schermhoogte witruimte.
Analyse
- Rij had mobiele bottom padding.
- CTA-element had daarnaast extra topmargin op mobiel.
Ingreep
- Mobiele rijpadding verlaagd naar functionele minimumwaarde.
- Extra topmargin op CTA-element verwijderd.
- Desktop/tablet gecontroleerd op regressie.
After
- CTA valt logisch na voordelen.
- Scrollflow voelt compact en professioneel.
Voorbeeld 2 — Productoverzicht in twee kolommen
Before
- Desktop oogt netjes.
- Tablet heeft onregelmatige “sprongen” tussen kaarten.
Analyse
- Kaart A spacing zat op elementniveau, kaart B op kolomniveau.
- Daardoor verschillende interpretatie per breakpoint.
Ingreep
- Spacingmodel gestandaardiseerd: interne kaartruimte op element, externe tussenruimte op rij/kolom.
- Beide kaarten gelijkgetrokken in opmaaklagen.
- Tablet als primaire validatie gebruikt.
After
- Strakke, consistente grid-ritmiek op alle apparaten.
- Minder onderhoudswerk bij toekomstige contentupdates.
Veelgemaakte fouten + directe fixes
-
Fout: margin gebruiken om interne lucht te creëren.
Fix: gebruik padding voor interne ruimte; margin voor afstand tussen componenten. -
Fout: spacing op drie niveaus tegelijk aanpassen zonder noteren.
Fix: één niveau per stap corrigeren en direct testen. -
Fout: alleen desktop optimaliseren.
Fix: altijd eindcheck op Desktop, Tablet en Telefoon staand. -
Fout: per element uitzonderingen stapelen i.p.v. patroon op blok/rijniveau.
Fix: centraliseer waar mogelijk structurele spacing op hoger niveau. -
Fout: visueel compenseren (“ik doe hier +8 en daar -8”).
Fix: eerst oorzaaklaag herstellen, daarna pas fine-tuning. -
Fout: ontbreken van teamafspraak over spacing-patterns.
Fix: leg per project 2–3 vaste spacingregels vast (bijv. sectie-interval, kaartpadding, CTA-afstand).
Als dit niet werkt, check dan...
- Of je echt op het juiste breakpoint hebt aangepast.
- Of er oude overrides actief zijn op blok- of elementniveau.
- Of spacingprobleem eigenlijk een breedte- of uitlijnprobleem is.
- Of je rechten compleet zijn om opmaakwijzigingen op te slaan.