Padding is de lege ruimte binnen een element, tussen de inhoud en de buitenrand. Als een knop comfortabele padding heeft, plakt het label niet tegen de rand. Heeft een card padding, dan heeft de tekst erin lucht in plaats van dat hij de wanden raakt. Het is een van de meest basale middelen om een interface rustig te laten voelen in plaats van vol.
Denk aan een foto in een lijst. Het passe-partout om de foto, die rand van lege ruimte voordat de lijst begint, werkt net als padding. Zonder dat voelt het beeld geperst en goedkoop. Met dat passe-partout krijgt de foto presence. Hetzelfde effect zie je op het scherm, en daarom is padding een kernonderdeel van goed UI-design en een praktische vorm van witruimte.
Het helpt om te weten hoe de getallen werken. Padding stel je per kant in, dus padding: 16px 24px betekent 16 pixels boven en onder, 24 links en rechts. Een knop heeft vaak meer horizontale dan verticale padding nodig om in balans te ogen, want tekst is breder dan hoog. Kies je de verhouding verkeerd, dan oogt het label geknepen of de knop opgeblazen. Designers halen die waarden meestal uit een vaste schaal, zoals 4, 8, 16, 24, zodat de ruimte door de hele interface op elkaar aansluit in plaats van willekeurige getallen. Padding bepaalt ook hoe makkelijk je iets aantikt. Op een telefoon raak je een link met royale padding moeiteloos met je duim, terwijl een krappe link voor misklikken en irritatie zorgt. Apple en Google raden allebei een tikvlak van rond de 44 pixels aan, en met padding haal je dat zonder dat het zichtbare element enorm wordt. Dit goed krijgen over schermformaten heen hoort bij degelijk responsive design.
Bij TopDevs zetten we padding vast via design tokens, zodat de ruimte op elke pagina en elk scherm gelijk blijft in plaats van per element af te dwalen.
