Padding creates space between an element’s content and border, but it also changes the element’s rendered dimensions. Treat it as part of the box model’s arithmetic rather than as purely visual spacing. section 3.5.1 section 3.5
Use these calculations to predict how padding affects layout:
- With the default content-box model, total width equals content width plus left and right padding plus left and right borders. section 3.5.1
- Percentage padding is calculated from the containing block’s width, including padding-top and padding-bottom; the parent’s declared height does not determine them. section 3.5.4
- Inherited percentage padding preserves its percentage relationship until layout determines the containing block’s dimensions. section 3.4.6
Fluid horizontal padding
For gutters that grow from 0.25rem on a 320px viewport to 1.75rem on a 1280px viewport, use linear interpolation to derive 2.5vw, then clamp the result: padding-left: clamp(0.25rem, 2.5vw, 1.75rem); padding-right: clamp(0.25rem, 2.5vw, 1.75rem); section 6.5.5
padding-left: clamp(0.25rem, 2.5vw, 1.75rem);
padding-right: clamp(0.25rem, 2.5vw, 1.75rem);
Inspect the complete CSS declaration for responsive horizontal padding with minimum, fluid, and maximum values. section 6.5.5
