The box-sizing property determines whether declared widths and heights apply to the content box alone or to the combined content, padding, and border. The default content-box model can make padded elements wider than intended. Setting box-sizing: border-box keeps the declared dimensions predictable: padding and borders fit inside them, leaving less room for inner content. section 3.2.2
Aligning a padded heading
A heading constrained to 1080px can extend beyond the main content when its padding is added outside that width. Apply border-box so the padding remains within the constraint: .page-header h1 { box-sizing: border-box; max-inline-size: var(--column-width); margin-inline: auto; padding-inline: 1.5rem; } The heading’s content edge then aligns with the main content beneath it. Padding still reduces the available inner content width, but it no longer makes the outer box wider. section 3.2.2
Apply the predictable model consistently, while accounting for existing styles:
- Use the universal selector and pseudo-element selectors to establish border-box sizing across the page. section 3.2.3
- Place the rule near the beginning of a new stylesheet so width and height consistently describe the actual outer dimensions. section 3.2.3
- Review an existing stylesheet carefully after adding the fix, because earlier rules may depend on content-box sizing. section 3.2.3
Listing 3.8 Universal border-box fix
*,
::before,
::after {
box-sizing: border-box; #1
}
Use the universal border-box snippet as a reusable stylesheet starting point. section 3.2.3
