spacing
padding
Shorthand for inner spacing between an element's content and its border. Padding never collapses and adds to an element's rendered footprint unless box-sizing: border-box is set.
padding: <top> <right> <bottom> <left> | <top> <horizontal> <bottom> | <vertical> <horizontal> | <all>Common values
| Value | Effect |
|---|---|
| 0 | Removes all inside spacing |
| 1rem | Equal 1rem padding on all sides |
| .5rem 1rem | Typical button padding |
| 1rem 2rem | Larger horizontal than vertical padding |
| clamp(1rem, 4vw, 4rem) | Fluid responsive padding |
Examples
.btn { padding: .5rem 1rem; }Standard button padding
.section { padding: 4rem 1rem; }Vertical rhythm for full-width sections
.card { padding: 1.5rem; box-sizing: border-box; }Predictable card width with padding included
Gotcha
Percentage padding is calculated from the parent's width (even for top/bottom), a fact used for aspect-ratio hacks before aspect-ratio existed.
Related properties
margin
Shorthand for setting outer spacing on all four sides of an element. Accepts lengths, percentages, or the auto keyword for horizontal centering.
box-sizing
Controls whether an element's declared width and height include padding and border. border-box is the modern default most stylesheets set globally.
width
Sets the horizontal size of an element's content box (or border box if box-sizing: border-box). Modern intrinsic keywords give sizing that adapts to content.
height
Sets the vertical size of an element. Viewport units like vh, dvh, and svh are common for full-screen sections and account for mobile browser chrome.
max-width
Caps how wide an element can grow, overriding width when the two conflict. Essential for readable line lengths and responsive containers.