Vraag iemand waarom een website er goedkoop uitziet en je krijgt zelden een concreet antwoord. Het is de kleur, denkt men, of het lettertype. Meestal is het geen van beide. Het is te weinig ruimte tussen dingen.
Ruimte is het goedkoopste ontwerpmiddel dat er is. Het kost niets en je hebt er geen talent voor nodig.
Toch is het het eerste wat sneuvelt. Er moet nog iets bij op de pagina, dus de marges worden krapper.
Na drie van die rondes staat alles tegen elkaar aan en voelt je site benauwd. Zonder dat iemand kan aanwijzen waarom.
De ruimte binnen een element, en waarom die je pagina rustig maakt.
Wat is padding?
Padding is de binnenruimte van een element, tussen de rand en de inhoud. In het Nederlands zeggen we opvulling.
Zet je padding op een knop? Dan komt er ruimte tussen de tekst en de rand. De knop wordt dus groter.
Het verschil met margin
Padding zit binnen het element, margin zit erbuiten. Dat is het hele verschil en het is fundamenteel.
Padding maakt een element groter en duwt de inhoud naar binnen. Margin duwt andere elementen weg zonder het element zelf te veranderen.
Vuistregel: gebruik padding voor ruimte binnen een blok en margin voor ruimte tussen blokken.
Het box model
Elk element in CSS bestaat uit vier lagen. De inhoud, de padding eromheen, dan de rand en tot slot de margin.
Het box model beschrijft hoe die vier zich tot elkaar verhouden. Dat is belangrijk bij het rekenen met breedtes.
Standaard telt padding namelijk bij de breedte op. Een blok van driehonderd pixels met twintig padding wordt driehonderdveertig breed.
Hoeveel gebruik je?
Niet willekeurig. Werk met een afstandschaal in plaats van per element te kiezen.
Wat ik aanhoud
Een schaal van vier, acht, zestien, vierentwintig en tweeenveertig pixels.
Bij een knop minimaal twaalf boven en onder, en vierentwintig links en rechts.
Bij een tekstblok evenveel ruimte links als rechts.
Meer ruimte tussen secties dan binnen een sectie.
Die laatste bepaalt of iets als een groep leest. Staat de ruimte overal gelijk, dan ziet je oog geen samenhang.
Op een telefoon
Daar is ruimte schaars, dus je haalt er wat vanaf. Maar niet overal.
Bij een knop houd je de padding juist ruim. Een aanraakvlak moet immers met een duim te raken zijn. Reken op minimaal vierenveertig pixels hoog.
Bij een tekstblok mag je binnenruimte kleiner. Zestien pixels aan weerszijden is genoeg om niet tegen de schermrand te plakken. Meer over die verschillen lees je bij breakpoint.
Waarom een pagina vol oogt
Bijna altijd door te weinig witruimte en niet door te veel inhoud.
Leg je afstanden vast in je design system, samen met je kolommen. Dan blijft elke nieuwe pagina vanzelf rustig.
Dat is dezelfde gedachte als bij een grid. Het valt pas op als het er niet is.
Marges die samensmelten
Er is een praktisch verschil dat mensen verrast. Marges van twee elementen boven elkaar smelten samen tot een.
Padding doet dat niet. Dat maakt padding voorspelbaarder om mee te rekenen, zeker bij blokken die je stapelt.
Een groter aanraakvlak dan je ziet
Je mag het klikbare gebied groter maken dan het zichtbare element. Zo houd je het beeld rustig terwijl de knop toch goed te raken is.
Dat is geen luxe maar een eis. Kleine knoppen zijn voor iemand met minder fijne motoriek onbruikbaar, zie accessibility.
Meer ruimte tussen dan binnen
Dit is de belangrijkste regel van allemaal. Meer ruimte tussen secties dan binnen een sectie.
Daarmee vertel je zonder woorden wat bij elkaar hoort. Staat de ruimte overal gelijk? Dan ziet je oog geen samenhang en leest je pagina als een lijst.
Meer vragen over Padding
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is padding?
Wat is het verschil tussen padding en margin?
Hoeveel padding gebruik je in een knop?
Waarom oogt mijn pagina vol?
Wat is het box model?
Hoe stel je padding in per schermformaat?
Wat is padding?
Padding zit binnen het element, margin zit erbuiten. Dat is het hele verschil en het is fundamenteel.
Padding maakt een element groter en duwt de inhoud naar binnen. Je knop wordt dus zelf groter.
Margin duwt andere elementen weg zonder het element zelf te veranderen. Je knop blijft even groot maar krijgt meer lucht eromheen.
De vuistregel is simpel: gebruik padding voor ruimte binnen een blok en margin voor ruimte tussen blokken.
Er is nog een praktisch verschil dat mensen verrast. Marges van twee elementen boven elkaar smelten samen tot een. Padding doet dat niet, en dat maakt padding voorspelbaarder om mee te rekenen.
Onthoud het als binnen tegenover buiten. Padding voor ruimte binnen een blok, margin voor ruimte tussen blokken.
Dat onderscheid voorkomt de meeste verwarring in een gesprek met je bouwer. Padding maakt je element groter, margin duwt de buren weg. Dat is het hele verhaal. Bij twijfel kies je padding, want dat rekent voorspelbaarder.
Wat is het verschil tussen padding en margin?
Padding is de ruimte binnen een element, tussen de rand en de inhoud. In het Nederlands zeggen we opvulling.
Zet je padding op een knop, dan komt er ruimte tussen de tekst en de rand van die knop. De knop wordt daardoor groter en prettiger om te raken.
Het is een van de weinige ontwerpmiddelen die niets kosten en waar je geen talent voor nodig hebt. Ruimte is gratis.
Toch is het het eerste wat sneuvelt. Er moet nog iets bij op de pagina, dus de marges worden krapper.
Na drie van die rondes staat alles tegen elkaar aan en voelt je site benauwd. Vraag je iemand waarom een website er goedkoop uitziet, dan noemt hij de kleur of het lettertype. Meestal is het geen van beide, maar te weinig ruimte.
Kijk eens naar een pagina die je goedkoop vindt ogen en let alleen op de ruimte. Bijna altijd staat alles te dicht op elkaar.
Ruimte is het goedkoopste ontwerpmiddel dat er is, en het is het eerste wat sneuvelt als er nog iets bij moet.
Hoeveel padding gebruik je in een knop?
Minimaal twaalf pixels boven en onder, en vierentwintig links en rechts. Dat is een goede basis voor de meeste knoppen.
Belangrijker dan het exacte getal is de verhouding. Meer ruimte links en rechts dan boven en onder oogt evenwichtiger.
Op een telefoon houd je die ruimte juist ruim. Een aanraakvlak moet met een duim te raken zijn, en daarvoor reken je op minimaal vierenveertig pixels hoog.
Dat is niet alleen prettig maar ook een toegankelijkheidseis. Kleine knoppen zijn voor iemand met minder fijne motoriek onbruikbaar.
Je mag dat aanraakvlak groter maken dan het zichtbare element. Zo houd je het beeld rustig terwijl de knop toch goed te raken is.
Test je knoppen op een telefoon met je duim en niet met je muis. Reken op minimaal vierenveertig pixels hoog voor iets klikbaars.
Je mag het klikbare gebied groter maken dan het zichtbare element, zodat je beeld rustig blijft. Dat is geen luxe maar een toegankelijkheidseis voor iedereen met minder fijne motoriek.
Waarom oogt mijn pagina vol?
Bijna altijd door te weinig witruimte en niet door te veel inhoud. Dat is een verrassende conclusie voor de meeste mensen.
De neiging is om te gaan schrappen in je tekst. Vaak levert meer ruimte tussen de blokken meer op dan minder woorden.
Let daarbij vooral op het verschil tussen ruimte binnen een groep en ruimte tussen groepen. Staat die overal gelijk, dan ziet je oog geen samenhang.
Meer ruimte tussen secties dan binnen een sectie is de belangrijkste regel. Daarmee vertel je zonder woorden wat bij elkaar hoort.
Werk daarnaast met een vaste schaal in plaats van per element te kiezen. Ik gebruik vier, acht, zestien, vierentwintig en tweeenveertig pixels. Dat voorkomt dat elke pagina net iets anders wordt.
Voeg ruimte toe voordat je tekst gaat schrappen. Meer wit tussen je blokken levert vaak meer op dan minder woorden.
Let daarbij vooral op het verschil tussen ruimte binnen een groep en ruimte tussen groepen.
Wat is het box model?
Elk element bestaat uit vier lagen. De inhoud, de padding eromheen, dan de rand en tot slot de margin.
Het box model beschrijft hoe die vier zich tot elkaar verhouden. Dat is vooral belangrijk bij het rekenen met breedtes.
Standaard telt padding namelijk bij de breedte op. Een blok van driehonderd pixels met twintig padding wordt driehonderdveertig breed.
Dat leidt tot indelingen die net niet passen, en tot een halve dag zoeken naar de oorzaak.
Je kunt dat gedrag omzetten, zodat padding binnen de opgegeven breedte valt. Vrijwel elke moderne site doet dat standaard, maar bij oudere sites is het een klassieke bron van verspringende kolommen. Meer over de techniek lees je bij CSS.
Werk met een vaste schaal in plaats van per element te kiezen. Ik gebruik vier, acht, zestien, vierentwintig en tweeenveertig pixels.
Leg die schaal vast, dan wordt elke nieuwe pagina vanzelf rustig zonder dat iemand erover hoeft na te denken.
Voelt jouw website vol of benauwd zonder dat je weet waarom? Stuur me de link via het formulier hieronder. Ik kijk naar je afstanden en je witruimte en laat zien waar het knelt. Vaak is de oplossing meer ruimte in plaats van minder tekst. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Binnenruimte, opvulling, interne marge
