Syllabus

CSS Padding: Shorthand, Percentages and Best Practices

Badar KhalilUpdated September 30, 2026 6 min read

CSS Padding: Complete Guide with Shorthand, Percentages and Examples

CSS padding is the space between an element content and its border. Padding makes buttons comfortable to tap, cards easy to read and sections breathe. Unlike margin, padding is inside the element, so the element background color or image is painted behind it. Mastering padding is essential for clean UI design, responsive layouts and accessibility.

What You Will Learn

Padding longhand and shorthand (1 to 4 values)
How percentage padding really works
Padding on inline, inline-block and block elements
How box-sizing changes the effect of padding
Fluid padding with clamp() and rem units
Padding vs margin, and accessible tap target sizes

Padding Longhand Properties

Use padding-top, padding-right, padding-bottom and padding-left to control each side separately.

Padding Shorthand Syntax

padding: 16px; all four sides
padding: 12px 24px; vertical, horizontal
padding: 8px 16px 24px; top, horizontal, bottom
padding: 8px 16px 24px 32px; top, right, bottom, left (clockwise)

Key Rules of Padding

No negative values. Padding can never be negative. Use negative margin when you need to pull things closer.
Background shows through. Background color and images extend under the padding by default.
Padding never collapses. Unlike vertical margins, padding values never merge.
Padding increases size in content-box mode. With box-sizing: border-box, padding is included in the declared width and height.
Padding is clickable. For links and buttons, padding is part of the clickable area.

Percentage Padding

Percentage padding on all four sides, including top and bottom, is calculated from the width (inline size) of the containing block. A child with padding: 10% inside a 400px wide parent gets 40px of padding on every side. This behaviour powered the old aspect-ratio hack (padding-top: 56.25% for 16:9 video), but today you should use the native aspect-ratio property instead.

Padding on Inline Elements

For inline elements like span and a, horizontal padding pushes text apart as expected. Vertical padding is painted around the text but does not push neighbouring lines away, so it can overlap other lines. For true vertical spacing, use display: inline-block, flex or block. This is why navigation links and buttons are usually inline-block, flex items or block elements.

Padding and box-sizing

In content-box mode, a box with width: 200px and padding: 20px becomes 240px wide. In border-box mode, it stays 200px and the content area shrinks to 160px. Always set box-sizing: border-box globally so that adding padding never breaks your layout. See the box model lesson for the reset snippet.

Logical Padding Properties

Use padding-inline (left and right in horizontal languages), padding-block (top and bottom), plus padding-inline-start and padding-inline-end for direction-aware spacing. They work properly in right-to-left languages such as Urdu and Arabic without extra CSS.

Fluid and Responsive Padding with clamp()

Instead of many media queries, use clamp(min, preferred, max) to make padding scale smoothly with the viewport: padding-block: clamp(2rem, 5vw, 6rem);. The padding never goes below 2rem, never exceeds 6rem and scales fluidly in between. This is a very popular modern responsive design technique, often combined with CSS custom properties for a spacing scale.

px, em and rem for Padding

px: fixed and predictable, good for fine details.
rem: relative to the root font size, great for consistent spacing systems that respect user font-size preferences.
em: relative to the element own font size, perfect for buttons whose padding should scale with the text, for example padding: 0.5em 1em;.

Padding for Accessibility: Tap Targets

Small clickable areas are hard to use on touch devices. WCAG 2.2 requires a minimum target size of 24 by 24 CSS pixels (Level AA, Success Criterion 2.5.8) and describes 44 by 44 pixels as the enhanced size (Level AAA, SC 2.5.5), which is also common platform guidance. Use padding to enlarge the clickable area without changing the visual text size.

Padding vs Margin

Feature	Padding	Margin
Location	Inside the border	Outside the border
Shows background	Yes	No (transparent)
Can collapse	Never	Vertical margins can
Negative values	Not allowed	Allowed
Clickable area	Part of it	Not part of it

Real-World Uses of Padding

Buttons: padding: 0.75rem 1.5rem;
Cards: padding: 1.5rem;
Page sections: padding-block: clamp(3rem, 8vw, 6rem);
Page gutters: padding-inline: 1rem; on a full-width container
Form fields: padding: 0.6em 0.8em; for comfortable typing

Common Mistakes

Adding padding to a width: 100% element in content-box mode, causing overflow.
Trying to use negative padding.
Expecting vertical padding on inline elements to push other lines.
Using margin when you need the background to extend (use padding).
Using tiny padding on touch targets.

Frequently Asked Questions

What is the difference between padding and margin?

Padding is space inside the element, between content and border. Margin is space outside the border, between elements.

Why is my percentage padding so large?

Percentage padding is based on the parent width, even for top and bottom.

Can padding be negative?

No. Negative padding values are invalid.

Does padding increase the element size?

Only in content-box mode. With border-box, padding is included in the width.

Key Takeaways

Padding is inside the border and shows the background.
Shorthand follows top, right, bottom, left order.
Percentage padding is based on the containing block width.
Use rem, em, clamp() and logical properties for flexible modern spacing.
Use padding to meet accessible tap target sizes.

Try it Yourself HTML

<style>
.p { background: #aed6f1; margin: 8px 0; font-family: sans-serif; }
.p1 { padding: 16px; }
.p2 { padding: 12px 40px; }
.p3 { padding: 8px 16px 32px; }
.p4 { padding: 8px 16px 24px 64px; }
</style>
<div class='p p1'>padding: 16px</div>
<div class='p p2'>padding: 12px 40px</div>
<div class='p p3'>padding: 8px 16px 32px</div>
<div class='p p4'>padding: 8px 16px 24px 64px</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
* { box-sizing: border-box; }
.parent { width: 400px; background: #eee; font-family: sans-serif; }
.child { padding: 10%; background: #f9e79f; }
</style>
<div class='parent'>
  <div class='child'>padding: 10% gives 40px on every side (10% of the 400px parent width).</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.btn { background: #2563eb; color: white; border: none; border-radius: 8px; font-size: 16px; margin: 8px; }
.tight { padding: 2px 4px; }
.comfy { padding: 0.75rem 1.5rem; }
.scaled { padding: 0.5em 1em; font-size: 24px; }
</style>
<button class='btn tight'>Tight</button>
<button class='btn comfy'>Comfortable</button>
<button class='btn scaled'>em-based</button>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.inline-link { background: #fad7a0; padding: 14px 24px; font-family: sans-serif; }
.block-link { display: inline-block; background: #abebc6; padding: 14px 24px; font-family: sans-serif; }
p { line-height: 1.4; font-family: sans-serif; }
</style>
<p>Inline padding overlaps lines: <span class='inline-link'>inline span</span> text text text text text text</p>
<p>Inline-block padding pushes lines: <span class='block-link'>inline-block</span> text text text text text text</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.section { padding-block: clamp(1.5rem, 6vw, 5rem); padding-inline: clamp(1rem, 4vw, 3rem); background: #d5f5e3; font-family: sans-serif; }
</style>
<div class='section'>Resize the preview window: the padding scales fluidly between the minimum and maximum.</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
:root { --space-s: 0.5rem; --space-m: 1rem; --space-l: 2rem; }
.card { padding: var(--space-m); border: 2px solid #8e44ad; border-radius: 10px; max-width: 320px; font-family: sans-serif; }
.card.large { padding: var(--space-l); margin-top: var(--space-m); }
</style>
<div class='card'>Medium padding from a CSS variable</div>
<div class='card large'>Large padding from a CSS variable</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.icon-btn { background: #eee; border: 1px solid #999; font-size: 14px; margin: 8px; cursor: pointer; }
.small { padding: 0; }
.accessible { padding: 12px 16px; min-width: 44px; min-height: 44px; }
</style>
<button class='icon-btn small'>x</button>
<button class='icon-btn accessible'>x</button>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.video { aspect-ratio: 16 / 9; width: 320px; background: #34495e; color: white; display: grid; place-items: center; font-family: sans-serif; }
/* Old hack for comparison: height: 0; padding-top: 56.25%; */
</style>
<div class='video'>16:9 with aspect-ratio</div>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

const box = document.createElement('div');
box.style.cssText = 'width:400px;padding:10%;box-sizing:border-box;';
document.body.appendChild(box);
const cs = getComputedStyle(box);
console.log('padding-top:', cs.paddingTop);
console.log('padding-left:', cs.paddingLeft);
box.remove();

Output

Press Run to execute.

Exercise: Make a Comfortable ButtonHTML

Add padding so the button is at least 44px tall and has roughly twice as much horizontal padding as vertical padding. Use em or rem units, and keep the font size unchanged.

Try it Yourself HTML

<style>
.btn { background: #2563eb; color: white; border: none; border-radius: 8px; font-size: 16px; }
/* Add padding here */
</style>
<button class='btn'>Subscribe</button>

Output

Press Run to execute.

Show expected output

.btn { padding: 0.75rem 1.5rem; } (about 44px tall).

This is a self-check — compare your result with the expected output above.

Exercise: Responsive Section PaddingHTML

Give .hero vertical padding that scales between 2rem and 6rem using clamp() with a 6vw preferred value, and horizontal padding of 1rem. Use logical properties.

Try it Yourself HTML

<style>
.hero { background: #fdebd0; font-family: sans-serif; }
/* Your padding here */
</style>
<div class='hero'>Fluid hero section</div>

Output

Press Run to execute.

Show expected output

.hero { padding-block: clamp(2rem, 6vw, 6rem); padding-inline: 1rem; }

This is a self-check — compare your result with the expected output above.

Was this page helpful?