Briefle words · UI design
Padding
The space inside an element, between its edge and the content it holds.
Say it to an AI
Event card with a filled primary CTA 'Register' next to an outlined secondary 'Add to calendar'. Give both generous padding, around 20px on the sides with a 40px height, so they read as real buttons and make comfortable touch targets.
How an expert would brief the stronger version of “Event RSVP card”.
See it
Try it as a puzzle →Event card on a community meetup platform, where people sign up for local events.
Why: B leaves about 20px between each label and the button's sides; A leaves about 10px, so the borders sit close to the text.
More ways experts use it
Notification settings panel with three toggle rows. Be generous with whitespace: roomy padding around the panel and every row, all on an 8px spacing scale, so each label, description and toggle reads as its own calm touch target. Let the panel grow taller rather than tighten.
Settings panel · UI design
Related words
Room 5 · Spacing & layout
Learn “Padding” in a five-minute lesson