= CSS padding box
{c}
The <CSS padding box> is the rectangle enclosed by the outer padding edges. It contains the <CSS content box> and padding, but excludes the border and margins.<Box model in CSS 2.2 by W3C>[§8.1, padding edge and padding box]{ref}
For content dimensions $120$ by $40$ <CSS pixels> and eight-pixel padding on all sides, the padding dimensions are
$$
W_{\rm padding}=120+8+8=136,\qquad
H_{\rm padding}=40+8+8=56.
$$
A further two-pixel border on each side makes the <CSS border box> $140$ by $60$ pixels. Padding is thus space inside the border rather than an external gap between neighboring boxes.
This distinction explains a common design change. Increasing padding while keeping a fixed content width enlarges the outer box. Increasing padding inside a fixed border-box width instead leaves less room for content, subject to the zero floor and other sizing constraints of <CSS box-sizing>. The same padding declaration can therefore have different consequences for text wrapping depending on the sizing edge.
The <CSS padding box> can also serve as a reference in particular layout rules, such as some cases of <CSS absolute positioning>. Use the applicable rule rather than assuming all geometric references mean the <CSS content box>. Padding geometry alone likewise does not define every painted or interactive boundary; those depend on their own properties and behavior.
Back to article page
