Parent width is the horizontal size of an element’s containing parent. CSS uses it as the reference for percentage-based widths, padding, and margins—even when those values describe vertical spacing. section 3.5.4 section 6.3.1
A percentage follows the parent
With a parent width of 1,000px, width: 50% makes the child 500px wide. Reducing the parent to 800px makes the same child 400px wide, preserving the proportion. section 6.3.1
Use the parent’s width when resolving percentage values for:
- Horizontal properties such as width, min-width, max-width, horizontal margins, and horizontal padding. section 6.3.1
- Vertical margins and padding, including margin-top, margin-bottom, padding-top, and padding-bottom; these use width rather than the parent’s height. section 3.5.4 section 6.3.1
- Height percentages only when the parent has an explicit height; otherwise, the value may resolve as auto or 0 depending on layout context. section 6.3.1
Spacing can exceed the declared width
For a 500px parent, a child with width: 50%, padding: 5%, and margin: 10% gets a 250px content width, 25px padding on each side, and 50px margins on each side. Under content-box, its width including padding is 300px; under border-box, it remains 250px. section 3.5.4
Listing 3.20 Percentages and the box model (part 2)
.parent {
width: 400px;
height: 100vh;
}
.child {
padding-top: 5%; #1
margin-bottom: 10%; #2
}
Inspect the counterintuitive case where padding-top and margin-bottom use the parent’s width even when the parent has a declared height. section 3.5.4
