spacing
max-width
Caps how wide an element can grow, overriding width when the two conflict. Essential for readable line lengths and responsive containers.
max-width: none | <length> | <percentage> | min-content | max-content | fit-contentCommon values
| Value | Effect |
|---|---|
| none | No maximum; element can grow indefinitely |
| 100% | Never wider than the parent |
| 1200px | Typical page container cap |
| 65ch | Comfortable prose measure |
| min-content | Cap at intrinsic minimum content width |
Examples
.prose { max-width: 65ch; }Limits paragraphs to a readable line length
.container { max-width: 1200px; margin: 0 auto; }Centered fixed-max page container
img { max-width: 100%; }Prevents images from overflowing their container
Gotcha
max-width beats width when both are set; percentage max-width still needs a sized parent to resolve.
Related properties
width
Sets the horizontal size of an element's content box (or border box if box-sizing: border-box). Modern intrinsic keywords give sizing that adapts to content.
height
Sets the vertical size of an element. Viewport units like vh, dvh, and svh are common for full-screen sections and account for mobile browser chrome.
box-sizing
Controls whether an element's declared width and height include padding and border. border-box is the modern default most stylesheets set globally.
margin
Shorthand for setting outer spacing on all four sides of an element. Accepts lengths, percentages, or the auto keyword for horizontal centering.
padding
Shorthand for inner spacing between an element's content and its border. Padding never collapses and adds to an element's rendered footprint unless box-sizing: border-box is set.