CSS Reference
padding
Controls the inner spacing of an element. The space between the content and the border.
Last updated: October 2026
Definition: The padding property controls the inner spacing of an element. It is the space between the element's content and its border. It sits inside the border and affects the element's own background color, making it visually distinct from margin.
🎬 Live Example
See how padding increases the space inside the blue box, showing the background color.
💡 Notice how the background color expands with the padding. This is the key difference from margin.
Basic Syntax
.element {
padding: 20px; /* All sides */
}
.element {
padding: 10px 20px; /* Vertical | Horizontal */
}
.element {
padding: 10px 20px 30px; /* Top | Horizontal | Bottom */
}
.element {
padding: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
}Same clockwise shorthand rules as margin. No negative values allowed.
🎯 All padding Properties
| Property | Purpose |
|---|---|
padding | Shorthand for all four sides. |
padding-top | Top padding only. |
padding-right | Right padding only. |
padding-bottom | Bottom padding only. |
padding-left | Left padding only. |
The Shorthand Rules
/* 1 value: all sides */
padding: 10px;
/* 2 values: vertical | horizontal */
padding: 10px 20px;
/* 3 values: top | horizontal | bottom */
padding: 10px 20px 30px;
/* 4 values: top | right | bottom | left */
padding: 10px 20px 30px 40px;Use the shorthand to reduce CSS. Use individual properties when only one side changes.
padding for Buttons (Accessibility)
Padding is critical for clickable elements. It increases the touch target size.
.btn {
padding: 12px 24px;
background: #3b82f6;
color: white;
border-radius: 8px;
border: none;
cursor: pointer;
}💡 WCAG recommendation: Touch targets should be at least 44×44 pixels. Padding is the easiest way to achieve this on buttons and links.
box-sizing — The Critical Companion
By default, padding adds to the element's width. This breaks layouts.
/* Default: content-box (padding adds to width) */
.box {
width: 300px;
padding: 20px;
/* Total width: 300px + 40px = 340px */
}
/* Better: border-box (padding included inside width) */
.box {
box-sizing: border-box;
width: 300px;
padding: 20px;
/* Total width: 300px */
}Best practice: Always add *, *::before, *::after { box-sizing: border-box; } at the top of your CSS. This makes padding and border included in width declarations, which is almost always what you want.
Common padding Values
/* Remove default padding (lists, buttons) */
padding: 0;
/* Small button padding */
padding: 0.5rem 1rem;
/* Standard button padding */
padding: 0.75rem 1.5rem;
/* Card padding */
padding: 1.5rem;
/* Large section padding */
padding: 4rem 2rem;
/* Vertical rhythm */
padding: 1rem 0;
/* Asymmetric (top/bottom more than sides) */
padding: 2rem 1rem;🎯 padding vs margin — Quick Reference
| Feature | padding | margin |
|---|---|---|
| Position | Inside border | Outside border |
| Affects background | Yes | No |
| Negative allowed | No | Yes |
| Collapses | No | Yes (vertical) |
| Increases click area | Yes | No |
| Common use | Buttons, cards, containers | Space between elements |
⚠️ Common Mistakes
- Not using
box-sizing: border-box. Padding adds to the width, breaking responsive layouts. - Using padding for spacing between elements. Padding is inside the element. Use margin or gap for spacing between elements.
- Trying negative padding. It's not allowed. Use negative margin instead.
- Too little padding on buttons. Aim for at least 8-12px. Small buttons are hard to tap on mobile.
- Forgetting padding on list items. Lists default to
padding-left: 40px. Reset to 0 if you want no indentation. - Setting padding on inline elements horizontally without care. It works but overlaps with surrounding text. Use
inline-blockfor full control. - Not testing padding on mobile. Padding that looks fine on desktop can make content overflow on small screens.
♿ Accessibility Notes
- Padding increases the touch target. Aim for at least 44×44 px on buttons and links.
- Never remove padding on interactive elements to save space. Users with motor disabilities need larger tap areas.
- Use
remunits for padding so it scales with the user's font-size setting. - Padding helps separate content visually, which is good for users with cognitive disabilities.
- Combine padding with color contrast for buttons. Big padding + clear text = accessible button.
❓ Frequently Asked Questions
What is the CSS padding property?
The padding property controls the inner spacing of an element — the space between the element's content and its border. It is inside the border and affects the element's own background color.
What is the difference between padding and margin?
Padding is inner space — inside the border, part of the element's box. Margin is outer space — outside the border, between the element and its neighbors. Padding affects background color; margin does not.
Does padding affect element size?
By default, yes. With box-sizing: content-box (the default), padding adds to the element's total width and height. With box-sizing: border-box, padding is included inside the declared width.
Can padding be negative?
No. Padding cannot be negative. Use negative margin instead if you need to pull content closer.
Should I use padding for buttons?
Yes. Padding increases the clickable area of a button, which is a both usability and accessibility win. Aim for at least 8px of padding on each side for touch targets.