Suggest an edit

Improve this article

Refine the answer for “What is padding-box?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`padding-box` **does not relate to the Box Model directly**. This value appears in other CSS properties, most often in `background-clip`, `background-origin`, and `border-image`. Its meaning: **limit the area of the background or image to the bounds of** `padding`, not reaching the border (`border`) and not extending past it.

For example:

```css
div {
  background: url(bg.png);
  background-clip: padding-box;
}
```

In this case, the background will be painted **only up to the padding boundary**, and will not extend under the `border`.

To make this clearer:

| Value | Where the background is drawn to |
|---|---|
| `border-box` | to the outer edge of the border |
| `padding-box` | to the edge of the padding (the border is excluded) |
| `content-box` | only inside the content |

**Important:** `padding-box` *is not a value for* `box-sizing`. `box-sizing` only has `content-box` and `border-box`.

## Summary

`padding-box` is the area bounded by the padding, and it is used in properties that control drawing the background or borders.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts165 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.