The padding property is a shorthand that sets the inner spacing on all four sides of an element — between the content and the border. It sets padding-top, padding-right, padding-bottom, and padding-left.
Use one to four values (length or percentage). Negative values are invalid. It is not inherited. Initial value for each side is 0. The element’s background paints through the padding area.
Not deprecated and not experimental. Core box-model spacing supported in all browsers for decades.
padding is inside the border. margin is outside the border, between this element and its neighbors.
padding: [ <length> | <percentage> ]{1,4} | initial | inherit;1 value = all sides. 2 values = top/bottom | left/right. 3 values = top | left/right | bottom. 4 values = top | right | bottom | left (clockwise).
| Value | Description | Try it |
|---|---|---|
<length> | Fixed size such as 16px or 1rem. Must be non-negative | Try it |
| Two values | Top/bottom, then left/right — for example 10px 24px | Try it |
| Four values | Top, right, bottom, left in clockwise order | Try it |
<percentage> | Relative to the containing block’s inline size (usually its width) | Try it |
| Three values | Top, left/right, then bottom — for example 8px 20px 16px | Try it |
initial | Resets each side to 0 | Try it |
inherit | Inherits the computed padding from the parent | Try it |
paddingPick how many sides you need, then write one to four non-negative values.
padding with 1–4 values (or use a longhand like padding-top).box-sizing: border-box, padding is included in the element’s width and height.| Goal | Typical value |
|---|---|
| Equal space inside | padding: 1rem; |
| More side space than vertical | padding: 0.5rem 1.5rem; |
| Each side different | padding: 8px 16px 12px 20px; |
The amber area is padding. The white dashed box is the content. Change padding and watch the space inside the border grow.
Each snippet shows only the padding you are studying. Use Try It Yourself for a live editor.
Apply the same padding on every side.
<style>
.box {
padding: 1rem;
border: 1px solid #ccc;
}
</style>
<div class="box">Padded content</div>padding: 1rem sets top, right, bottom, and left to 1rem.px, em, and rem all work.Set vertical and horizontal padding with two values.
<style>
.box {
padding: 0.5rem 1.5rem;
border: 1px solid #ccc;
}
</style>
<div class="box">Card text</div>0.5rem applies to top and bottom.1.5rem applies to left and right.Set each side separately in top → right → bottom → left order.
<style>
.box {
padding: 8px 24px 16px 12px;
border: 1px solid #ccc;
}
</style>
<div class="box">Uneven padding</div>8px is the first value.24px is the second value.16px is the third value.12px is the fourth value. Remember: clockwise from the top.If the box looks bigger than expected, one of these is usually why.
Unlike margin, padding cannot be negative. The declaration is ignored if you try.
Even top and bottom percentage padding resolve against the containing block’s inline size (usually width), not its height.
With content-box, padding adds to the total size. Use box-sizing: border-box so width includes padding and border.
auto is not valid for paddingCentering with auto is a margin trick. Padding has no auto keyword.
Padding does not apply to table row groups, rows, or columns. It does apply to cells and most other elements.
padding is a browser CSS property for the box model. Node.js, Deno, and Bun do not apply it.
Supported in all modern browsers and Internet Explorer for many years. Part of the CSS Box Model.
Bottom line: Safe for every layout. Logical longhands like padding-block are newer; the classic padding shorthand is universal. It is not a runtime API.
auto, no negatives.One line: padding sets space inside the border — use 1–4 lengths or percentages, never negative.
Learn the logical shorthand for block-axis padding.
8 people found this page helpful