CSS Padding: How to Set Space Inside Elements

Use CSS padding to add space between an element’s content and its border. For example, padding: 16px; adds 16 pixels on all four sides. Padding is inside the border; margin creates space outside it.

.card {
  padding: 16px;
}

Padding is useful for making text, buttons, cards, and other elements easier to read and interact with. This guide explains the shorthand, units, side-specific and logical properties, common layout effects, and ways to debug unexpected spacing.

1. What padding does

An element’s box is arranged from the inside out: content, padding, border, then margin. Padding surrounds the content and sits inside the border. Increasing padding moves the border farther from the content. Margin adds room beyond the border.

.card {
  padding: 16px;
  border: 1px solid #888;
  margin: 24px;
}

In this example, the content has 16 pixels of space before the border, and the border has 24 pixels of space before neighboring boxes. The box model is described in the MDN CSS box model guide.

2. The one-to-four-value shorthand

The padding shorthand accepts one, two, three, or four nonnegative length or percentage values. Values with four sides are read clockwise, starting at the top.

Values	Meaning	Example
One	All sides	`padding: 12px;`
Two	Top and bottom \| left and right	`padding: 8px 16px;`
Three	Top \| left and right \| bottom	`padding: 8px 16px 24px;`
Four	Top \| right \| bottom \| left	`padding: 8px 12px 16px 20px;`

.one-value   { padding: 12px; }
.two-values  { padding: 8px 16px; }
.three-values { padding: 8px 16px 24px; }
.four-values { padding: 8px 12px 16px 20px; }

With four values, remember the sequence: top, right, bottom, left. A mnemonic some developers use is clockwise around the box. The shorthand and its grammar are documented in MDN’s padding reference.

3. Set individual sides

Use physical longhand properties when the design calls for a specific physical edge, or when separate rules make the intent clearer.

.notice {
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
}

Longhands can also refine a shorthand. Later declarations in the cascade override the affected side:

.notice {
  padding: 12px;
  padding-left: 20px; /* overrides only the left side */
}

As with other CSS declarations, specificity, source order, inheritance rules, and media queries determine which winning declaration applies. Padding itself is not inherited by default.

4. Choose a unit

Lengths

Lengths are the common choice for controlled interior spacing. Pixels give a direct CSS-pixel amount; rem scales with the root font size; em scales with the element’s font size.

.card { padding: 1rem; }
.button { padding: 0.6em 1em; }
.compact { padding: 8px 12px; }

Use a unit that matches the design system and the behavior you want. A type-relative unit can help spacing grow with text, while a fixed length can make a particular spacing value explicit.

Percentages

Percentage padding is relative to the containing block’s inline size. In ordinary horizontal writing, that means its width, including for top and bottom padding. It is not a percentage of the element’s own height.

.responsive-panel {
  padding: 5%;
}

If the containing block is 600 pixels wide in horizontal writing, 5% padding resolves to 30 pixels on each side, including top and bottom. This can be useful when spacing should scale with available width, but may produce unexpectedly large vertical gaps in a wide layout. The CSS 2.1 box model specification also defines percentage padding in relation to the containing block’s width: W3C CSS 2.1, Box model.

5. Padding, width, and box sizing

Padding contributes to an element’s rendered box dimensions. When you specify a width, the box-sizing property determines how the content and padding relate to that specified width. If a box is wider than expected, inspect both its padding and its box-sizing rule.

.content-box-example {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  /* content width is 300px; padding adds to the outside size */
}

.border-box-example {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  /* the declared width includes content and padding */
}

Check the computed styles in browser developer tools when the measured box does not match the declared width. The MDN box model guide covers the relationship between content, padding, border, and margin.

6. Use logical padding for writing direction

Physical properties such as padding-left always refer to the left edge. Logical properties express spacing in relation to the text flow: inline direction and block direction. They adapt more naturally to right-to-left text and vertical writing modes.

.article-card {
  padding-inline: 1rem; /* inline start and end */
  padding-block: 0.75rem; /* block start and end */
}

.asymmetric-card {
  padding-inline-start: 1.25rem;
  padding-inline-end: 0.75rem;
  padding-block-start: 1rem;
  padding-block-end: 0.5rem;
}

Use physical sides when a design truly means a fixed edge of the screen or object. For flow-relative spacing, see MDN’s guide to logical margin, border, and padding properties.

7. Padding versus margin

Property	Where the space goes	Typical use
`padding`	Between content and border	Give text room inside a card or make a button’s clickable area larger
`margin`	Outside the border	Separate one element from neighboring elements

Padding is part of the element’s box and its background extends through the padding area. Margin is outside the border. A quick debugging question is: should the space belong to this element’s surface, or should it separate this element from another? Choose padding for the first, margin for the second.

8. Common patterns

Card with uniform padding

.card {
  padding: 1.25rem;
  border: 1px solid #d0d5dd;
  border-radius: 0.5rem;
}

Button with vertical and horizontal space

.button {
  padding: 0.65em 1em;
}

One side needs extra room

.callout {
  padding: 1rem;
  padding-inline-start: 1.5rem;
}

Responsive percentage inset

.media-frame {
  padding: 4%;
}

Remember that this percentage is based on the containing block’s inline size in horizontal writing. If that is not the intended behavior, use a length or a responsive rule that directly expresses the desired layout.

9. Troubleshooting padding

Symptom	Likely cause	What to check or change
The declaration has no effect	Invalid value, overridden rule, or wrong selector	Check the browser’s computed styles, selector match, and CSS syntax. Negative padding values are invalid.
The whole element is wider than expected	Padding adds to the specified content width under the active box-sizing model	Inspect `box-sizing`, width, padding, and border together.
Top or bottom percentage padding is surprisingly large	Percentage padding uses containing-block inline size/width in horizontal writing	Use a length if the vertical spacing should not scale with width.
Spacing appears on the wrong side in right-to-left content	A physical left/right property was used for flow-relative intent	Use `padding-inline-start` or `padding-inline-end`.
Only one edge is wrong	A later shorthand may reset all four sides, or a longhand may override one side	Review declaration order and computed values for every side.
There is too much distance between two cards	The spacing may be margin, parent gap, or padding on both boxes	Inspect the parent layout and both elements’ box model overlays.

10. Performance, reliability, and browser support

Padding is a fundamental layout property and generally needs no special runtime setup. Changing it can cause layout recalculation because it affects box geometry, so avoid repeatedly changing layout properties in tight animation loops when a transform or another approach fits the effect. For ordinary page layout, padding is a standard, dependable choice.

MDN marks the established padding shorthand as Baseline Widely available, with browser availability dating to July 2015. This statement applies to the shorthand, not every newer related CSS feature; check target browser support when using newer logical properties.

11. ScreenshotNeo: inspect the rendered result without browser setup

For a quick visual check of padding across a page, ScreenshotNeo is a website screenshot API and MCP server for developers. It can capture a rendered page as PNG, JPEG, WebP, or PDF. Its screenshot options include viewport and device presets, full-page capture, element capture by CSS selector, dark mode, custom CSS and JavaScript, waits, and custom headers.

Or skip the browser setup

Make one GET request with the target URL and your API key. See the ScreenshotNeo API documentation for configuration and response details.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers say the page verdict and whether the request was billed. An MCP server gives AI agents tools to take screenshots, inspect page information, and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.

12. FAQ

Can padding be negative?

No. Padding values must be nonnegative. Use margin or a different layout technique when elements need to overlap.

Does padding affect the background?

Yes. An element’s background is painted behind its content and padding, up to the border edge by default.

Does padding collapse like vertical margins can?

No. Padding does not collapse with neighboring padding or margins.

Is padding supported in all browsers?

The established shorthand is widely available in browsers. Check compatibility separately for newer related properties.

Summary

Padding adds space between content and border; margin adds space outside the border.
One shorthand value applies to all sides; two, three, and four values follow the standard top/right/bottom/left pattern.
Lengths provide direct spacing; percentages refer to the containing block’s inline size, including on top and bottom in horizontal writing.
Use logical properties when spacing should follow text direction or writing mode.