Solution
Width: 548px. Height: 48px.
When we set our .box
to have width: 100%
,
we're saying that the box's content size should be equal to the available space, 500px
.
The padding and border is added on top.
Our box winds up being 548px wide because it adds 20px of padding and 4px of border to each side: 500 + 20 * 2 + 4 * 2.
The same thing happens with height: because the element is empty, it has a content size of 0px, with the same border and padding added on top.
This behaviour is surprising, and generally not what we want as developers!
Thankfully, browsers provide an escape hatch.
The box-sizing
CSS property allows us to change the rules for size calculations.
The default value (content-box
) only takes the inner content into account, but it offers an alternative value: border-box
.