CSS Padding

Padding is the space inside an element — between its content and its border. Think of a photo frame: the picture is the content, the frame is the border, and the white mount board between them is the padding. Padding makes content breathe; without it, text touches the border and looks cramped.

Diagram — see how it fits together

Padding is part of the element itself, so the element's background colour fills the padding area too. That is the easiest way to tell padding apart from margin: margin is outside the border and stays transparent, padding is inside the border and shows the background.

The four sides

Each side has its own property: padding-top, padding-right, padding-bottom and padding-left. Use them when only one side needs space.

h1 {
  padding-top: 20px;
  padding-bottom: 10px;
}

The padding shorthand

One property, padding, can set all four sides at once. The number of values changes the meaning:

• padding: 20px; — all four sides get 20px.
• padding: 10px 20px; — top and bottom 10px, left and right 20px.
• padding: 10px 20px 30px; — top 10px, left and right 20px, bottom 30px.
• padding: 10px 20px 30px 40px; — top, right, bottom, left — clockwise from the top.

The four-value order is easy to remember: it goes clockwise, starting at the top — like the hands of a clock.

Syntax — padding in action

.card {
  border: 2px solid orange;
  background: lightyellow;
  padding: 20px 30px;
}
button {
  padding: 10px 24px;
}

Padding vs margin

Use padding when the space should carry the element's background — a card, a button, a coloured banner. Use margin when you want empty space between two elements, like the gap between two cards. If you are not sure, ask: "Should this space be coloured?" If yes, padding. If no, margin.

Common mistakes

• Using padding to push two elements apart — that is margin's job. Padding pushes the content away from its own border.
• Forgetting that padding adds to the width. A box of width: 200px with padding: 20px is 240px wide on the page (with the default box-sizing: content-box).
• Putting top and bottom padding on an inline element like <span> — it paints, but it does not push the lines above and below apart.
• Writing the four-value shorthand in the wrong order — it is top, right, bottom, left, clockwise from the top.

Remember

• Padding is the space inside the border; the background colour fills it.
• Shorthand values go clockwise from the top: top, right, bottom, left.
• Two values mean vertical first, then horizontal: padding: 10px 20px;.
• Padding adds to the element's total size unless box-sizing: border-box is set.

Example explained

• .menu { ... padding: 20px; } — the whole menu card gets 20px of space inside its border on all four sides, so the heading and the items never touch the orange border.
• .item { ... padding: 10px 15px; } — each menu item gets 10px of space top and bottom and 15px left and right, so the text sits comfortably inside its white box.
• margin-bottom: 10px; on .item — this is margin, not padding: it is the empty gap between two menu items, outside their borders.
• .price { ... padding: 4px 10px; } — the offer line is a small strip, so it needs only a little padding: 4px top and bottom, 10px left and right.
• background: #fffbeb; on .menu — the pale yellow fills the padding too, which is how you can see that padding is inside the element.