What is padding-box?
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:
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.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.