Padding creates space between an element’s content and its border. Use it when a background should extend around content, such as text in a navigation link or heading. For space between separate elements, consider margin or flexbox gap instead. section 4.1.2 section 12.1.1
The shorthand assigns values clockwise, starting at the top:
- `padding: 10px 15px 0 5px` sets top, right, bottom, and left separately. section 1.4.2
- `padding: 5px 15px` sets top and bottom to 5px, and both sides to 15px. One value applies everywhere; with three values, the left matches the right. section 1.4.2
Make the visible link fully clickable
In a flexbox menu, give the link—not just its enclosing list item—the padding: `.site-nav > li > a { display: block; padding: 0.5em 1em; }`. The padded area then belongs to the clickable link. Use `gap` on the menu for space between items. section 4.1.2
Padding can also keep a child’s vertical margin from collapsing outside its container. If that leaves too much space around a heading, remove the heading’s margin and let padding provide the intended space. For spacing close to text, `em` values scale with the element’s font size: at `16px`, `padding: 1em` computes to `16px`. section 3.5.3 section 2.2
