CSS padding Property
Learn how the CSS padding property adds space inside an element's border. Covers shorthand syntax, one-to-four value rules, percentages, and gotchas.
The padding property adds space between an element's content and its border. Unlike margin, which pushes elements apart from the outside, padding works on the inside — it enlarges the clickable or visible area of the element while keeping the border in place.
Padding values are set using lengths or percentages, and they are always non-negative.
Negative values are not allowed for padding. Use a negative margin if you need to pull content inward.
padding is a shorthand that sets all four sides at once. You can also control each side individually:
How padding fits in the box model
Every HTML element is wrapped in the CSS box model: content → padding → border → margin, from the inside out. Padding sits between the content area and the border, so it is part of the element's background region.
When you set box-sizing: border-box (the modern default in most resets), padding is included in the declared width and height. With the legacy box-sizing: content-box, padding is added on top of those dimensions. See box-sizing for details.
Property reference
| Initial value | 0 |
| Applies to | All elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group, and table-column. Also applies to ::first-letter. |
| Inherited | No |
| Animatable | Yes |
| Version | CSS1 |
| DOM syntax | element.style.padding = "30px" |
Syntax
padding: <length> | <percentage> | initial | inherit;One-to-four value rule
The shorthand accepts one, two, three, or four space-separated values. The mapping follows the clockwise order: top → right → bottom → left.
| Values given | Top | Right | Bottom | Left |
|---|---|---|---|---|
padding: 20px | 20px | 20px | 20px | 20px |
padding: 20px 40px | 20px | 40px | 20px | 40px |
padding: 10px 20px 30px | 10px | 20px | 30px | 20px |
padding: 10px 20px 30px 40px | 10px | 20px | 30px | 40px |
A useful mnemonic: missing values mirror the opposite side (left mirrors right; bottom mirrors top).
Examples
Four values (top / right / bottom / left)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 15px 30px 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>The paragraph receives 15 px on top, 30 px on the right, 20 px on the bottom, and 40 px on the left.
Percentage values
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 5% 10% 10% 5%;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Percentage padding values — including padding-top and padding-bottom — are always calculated relative to the width of the containing block, not its height. This makes it easy to create aspect-ratio boxes: a block with padding-top: 56.25% maintains a 16:9 ratio regardless of its width.
Two values (vertical / horizontal)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>padding: 20px 40px sets 20 px top and bottom, 40 px left and right — a compact way to apply symmetric spacing.
Values
| Value | Description |
|---|---|
length | A fixed size in any CSS length unit: px, em, rem, pt, cm, etc. Default is 0. |
% | A percentage of the width of the containing block (applies to all four sides). |
initial | Resets the property to its default value (0). |
inherit | Inherits the computed value from the parent element. |
Logical properties (writing-mode aware)
For internationalized layouts that support vertical or right-to-left text, the physical padding-top/right/bottom/left sides can feel wrong. CSS provides logical properties that respect the writing direction:
| Logical property | Maps to in horizontal LTR |
|---|---|
padding-block-start | padding-top |
padding-block-end | padding-bottom |
padding-inline-start | padding-left |
padding-inline-end | padding-right |
The shorthand equivalents are padding-block and padding-inline.
/* Equivalent to padding-top + padding-bottom */
padding-block: 16px;
/* Equivalent to padding-left + padding-right */
padding-inline: 24px;These are supported in all modern browsers and are preferred in component libraries that support bidirectional text.
Common use cases and gotchas
Clickable area. Because padding is part of the element's background and event-capture region, increasing it on a button or link makes the target easier to tap — a direct win for mobile usability.
Padding on inline elements. Horizontal padding on inline elements (like <span>) works as expected. Vertical padding is applied visually but does not push surrounding lines apart; use a block or inline-block element if you need vertical rhythm.
Padding vs. margin. Use padding when you want the background color or border to cover the extra space. Use margin when the space should be transparent and outside the border.
box-sizing interaction. With content-box, adding padding makes the element visually larger. With border-box, padding is absorbed inside the declared width, keeping layout predictable. See box-sizing.
Tables. The padding shorthand has no effect on table rows or column groups. Use padding on <td> and <th> cells instead, or use border-spacing for inter-cell gaps.