spacing
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.
width: auto | <length> | <percentage> | min-content | max-content | fit-contentCommon values
| Value | Effect |
|---|---|
| auto | Default; browser calculates from content and context |
| 100% | Fills the containing block |
| min-content | Shrinks to the smallest possible content size |
| max-content | Grows to the largest content size without wrapping |
| fit-content | Shrinks to content but capped by container |
Examples
.container { width: 100%; max-width: 1200px; }Fluid container with a cap
.pill { width: fit-content; padding: .25rem .75rem; }Chip sized to its label
img { width: 100%; height: auto; }Fluid responsive images
Gotcha
Percentage widths resolve against the containing block's width; that block must itself have a defined width for the percentage to work.
Related properties
max-width
Caps how wide an element can grow, overriding width when the two conflict. Essential for readable line lengths and responsive containers.
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.
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.
margin
Shorthand for setting outer spacing on all four sides of an element. Accepts lengths, percentages, or the auto keyword for horizontal centering.