A button whose text almost touches its edges, a card whose heading sticks to the frame: nothing gives away an amateur layout faster than tight or missing padding. It is the property that gives content room to breathe, and one of the very first things adjusted when building an interface.
padding is simple in principle, but holds two practical surprises: a percentage value does not behave the way most people expect, and padding directly affects a box's final size, a point covered in box-sizing.
Definition
padding sets the space between an element's content and its border. Unlike margin, that space is fully part of the box: it takes the element's background, can carry a shadow, and counts toward its clickable surface.
.button {
padding: 12px 24px;
background-color: #2563eb;
color: white;
}Here, the blue background covers the text and every bit of space added by padding: twelve pixels above and below, twenty-four on each side. Without this rule, the button would shrink to the exact size of its text, hard to click and visually unappealing.
The padding shorthand, per side or in one block
padding follows the exact same shorthand logic as margin: one, two, three or four values, always clockwise starting from the top. Each side can also be set individually.
| Syntax | Example | Effect |
|---|---|---|
| Shorthand, one value | padding: 16px; | Same space on all four sides |
| Shorthand, four values | padding: 8px 16px 8px 16px; | Top, right, bottom, left |
| Longhand property | padding-left: 16px; | One side only, others untouched |
The longhand form is useful when a single side needs to vary depending on context, for instance a larger padding-left only on the items of a nested list.
Percentage padding: a silent trap
A percentage value on padding-top or padding-bottom is always calculated against the parent container's width, never against its height. That is counter-intuitive, and it catches out even experienced developers the first time they run into it.
.video-ratio {
width: 100%;
padding-top: 56.25%; /* calculated on WIDTH, not height */
}Far from a bug, this quirk is exactly what makes the classic pure-CSS aspect-ratio trick possible: a percentage padding-top creates a height proportional to the width, useful before a property built specifically for that problem existed.
padding or margin: how to choose
The choice between the two almost always comes down to a single question: does the space need to be able to carry a colour, a background image or a shadow?
padding | margin | |
|---|---|---|
| Takes the element's background | Yes | No, always transparent |
| Counts as part of the clickable area | Yes | No |
| Accepts negative values | No | Yes |
| Typical use | Internal space of a button or a card | Distance between two neighbouring elements |
Whenever a space needs to stay visually attached to the element, change colour on hover, or grow a clickable area, it is padding. Whenever it only separates two elements without displaying anything in it, it is margin.
Frequently asked questions
Can padding take a negative value?
No, unlike margin. Browsers either ignore a negative padding value or treat it as invalid depending on the case, which makes it a source of silent errors worth watching for.
Does padding really grow a button's clickable area?
Yes, entirely: padding is part of the element's box, and therefore part of its interactive surface. That is why a button with generous padding is easier to click, especially on a touch screen, than one shrunk to the size of its text.
Why does my percentage padding-top change when I resize the page width?
Because a percentage on padding-top or padding-bottom is always calculated from the container's width, never its height, even vertically. This is a deliberate part of the specification, not a bug, long exploited to simulate a fixed aspect ratio.