Padding is the transparent space between an element’s content and its border. Unlike margin, padding is part of the element itself — it takes the element’s background color and is included in the clickable/interactive area. Choosing appropriate padding is the foundation of readable, well-proportioned UI components. In this lesson you will master shorthand syntax, percentage padding tricks, and best practices for consistent padding scales.
Padding Properties
| Syntax | Meaning | Example |
|---|---|---|
padding: A |
All four sides equal | padding: 16px |
padding: A B |
Vertical / Horizontal | padding: 12px 24px |
padding: A B C D |
Top / Right / Bottom / Left | padding: 8px 16px 12px 16px |
padding-inline |
Left + right (logical property) | padding-inline: 24px |
padding-block |
Top + bottom (logical property) | padding-block: 12px |
Padding with box-sizing
| box-sizing | width: 200px, padding: 20px | Total Rendered Width |
|---|---|---|
content-box |
Content = 200px, padding adds 40px | 240px |
border-box |
Content = 160px (200 – 40), padding included | 200px exactly |
Percentage Padding Tricks
| Usage | Relative To | Common Trick |
|---|---|---|
padding: 5% |
Parent width | Responsive inner spacing that scales with layout |
padding-bottom: 56.25% |
Parent width | Forces 16:9 aspect ratio (legacy technique) |
padding-top: 100% |
Parent width | Creates a perfect square based on width |
padding-top and padding-bottom — is always calculated relative to the width of the containing block, never the height. This is intentional by the CSS specification and is what makes the aspect-ratio padding trick work.aspect-ratio property instead of the padding-bottom trick: aspect-ratio: 16 / 9. It is supported in all modern browsers, more readable, and does not require an empty wrapper element or absolute-positioned children.Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Padding</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; padding: 40px; background: #f8fafc; }
/* Padding shorthand demonstrations */
.p-all { padding: 24px; background: #ede9fe; margin-bottom: 12px; border-radius: 6px; }
.p-xy { padding: 8px 24px; background: #d1fae5; margin-bottom: 12px; border-radius: 6px; }
.p-four { padding: 4px 24px 16px 48px; background: #fef3c7; margin-bottom: 24px; border-radius: 6px; }
/* Button with accessible touch-target padding (min 44px height) */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px; /* 12px vertical = 24px total added height */
font-size: 1rem;
font-family: system-ui, sans-serif;
background: #4f46e5;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
margin-bottom: 24px;
}
/* 16:9 aspect ratio — legacy padding-bottom trick */
.video-wrap {
width: 100%;
max-width: 480px;
position: relative;
padding-bottom: 56.25%; /* 9 / 16 = 0.5625 */
height: 0;
background: #1e293b;
border-radius: 8px;
overflow: hidden;
margin-bottom: 16px;
}
.video-wrap .video-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
font-size: 0.875rem;
}
/* Modern aspect-ratio approach */
.video-modern {
width: 100%;
max-width: 480px;
aspect-ratio: 16 / 9;
background: #0f172a;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
font-size: 0.875rem;
}
</style>
</head>
<body>
<div class="p-all">padding: 24px — equal all sides</div>
<div class="p-xy">padding: 8px 24px — short vertical, wider horizontal</div>
<div class="p-four">padding: 4px 24px 16px 48px — T R B L (clockwise)</div>
<button class="btn">✓ Save Changes (12px 24px padding)</button>
<div class="video-wrap">
<div class="video-label">16:9 via padding-bottom: 56.25% (legacy)</div>
</div>
<div class="video-modern">16:9 via aspect-ratio (modern)</div>
</body>
</html>
How It Works
Step 1 — Single Value Expands Evenly
padding: 24px applies 24px on all four sides. The background fills the content area plus all padding — visually you see the combined region as the element’s body.
Step 2 — Two Values Set Axes
padding: 8px 24px gives 8px top and bottom (block axis) and 24px left and right (inline axis). Buttons use this pattern — comfortable horizontal reach with tighter vertical height.
Step 3 — Four Values Follow TRBL Order
padding: 4px 24px 16px 48px = Top 4px, Right 24px, Bottom 16px, Left 48px. Remember the mnemonic TRouBLe — Top, Right, Bottom, Left — clockwise from the top.
Step 4 — Percentage Padding References Parent Width
padding-bottom: 56.25% always references the parent container’s width. Setting height: 0 first and relying entirely on padding-bottom creates a box whose height is always 56.25% of its width — the 16:9 ratio. Children use position: absolute to fill this reserved space.
Step 5 — aspect-ratio Replaces the Trick
aspect-ratio: 16 / 9 achieves the same result with a single declaration. No height: 0, no percentage hack, no absolute-positioned children required. Use this for all new projects.
Real-World Example: Button Size Variants Using Padding Scale
/* button-system.css */
*, *::before, *::after { box-sizing: border-box; }
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
}
/* Base — shared across all sizes */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: system-ui, sans-serif;
font-weight: 600;
border: 2px solid transparent;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
line-height: 1;
background: #4f46e5;
color: white;
transition: background 0.15s;
}
/* Size variants — only padding and font-size change */
.btn-xs { padding: var(--space-1) var(--space-3); font-size: 0.75rem; }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: 0.875rem; }
.btn-md { padding: var(--space-3) var(--space-5); font-size: 1rem; }
.btn-lg { padding: var(--space-4) var(--space-6); font-size: 1.125rem; }
.btn-xl { padding: var(--space-5) 32px; font-size: 1.25rem; }
/* Colour variants */
.btn-primary { background: #4f46e5; }
.btn-secondary { background: transparent; border-color: #4f46e5; color: #4f46e5; }
.btn-danger { background: #dc2626; }
.btn-ghost { background: transparent; color: #4f46e5; }
/* Icon-only — equal padding creates a square */
.btn-icon { padding: var(--space-3); border-radius: 50%; }
/* Full-width */
.btn-full { display: flex; width: 100%; }
/* Hover states */
.btn-primary:hover { background: #4338ca; }
.btn-secondary:hover { background: #ede9fe; }
.btn-danger:hover { background: #b91c1c; }
.btn-ghost:hover { background: #ede9fe; }
Common Mistakes
Mistake 1 — Vertical padding on inline elements causes line overlap
❌ Wrong — vertical padding on inline elements does not push siblings apart:
span { padding: 20px 8px; background: yellow; }
/* Padding renders but line-height controls vertical spacing — lines overlap */
✅ Correct — change to inline-block so vertical padding participates in flow:
span { display: inline-block; padding: 20px 8px; background: yellow; }
Mistake 2 — Forgetting padding in width calculation without border-box
❌ Wrong — sidebar overflows container:
.sidebar { width: 300px; padding: 0 24px; }
/* actual = 300 + 48 = 348px — may break layout */
✅ Correct — with border-box reset, padding is absorbed into stated width:
*, *::before, *::after { box-sizing: border-box; }
.sidebar { width: 300px; padding: 0 24px; } /* stays exactly 300px */
Mistake 3 — Using padding instead of gap in flex/grid layouts
❌ Wrong — padding on flex children creates uneven gaps at edges:
.flex-row { display: flex; }
.flex-row > * { padding: 0 12px; } /* outer items have unwanted outer gap */
✅ Correct — use gap for inter-child spacing:
.flex-row { display: flex; gap: 24px; }
Quick Reference
| Syntax | Meaning | Notes |
|---|---|---|
padding: A |
All sides equal | Single value |
padding: A B |
Block / Inline axes | Two-value shorthand |
padding: A B C D |
Top Right Bottom Left | TRouBLe mnemonic |
padding-inline |
Left + right | Logical property |
padding-block |
Top + bottom | Logical property |
| % padding | Always relative to parent width | padding-bottom: 56.25% = 16:9 |