spacing
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.
height: auto | <length> | <percentage> | min-content | max-content | fit-contentCommon values
| Value | Effect |
|---|---|
| auto | Default; height derived from content |
| 100vh | Full viewport height |
| 100dvh | Dynamic viewport height, adjusts to mobile UI |
| 100% | Percentage of parent's height |
| fit-content | Shrinks to content, capped by container |
Examples
.hero { height: 100dvh; }Full-screen hero that respects mobile bars
.avatar { height: 40px; width: 40px; }Fixed-size circular avatar
.panel { height: 100%; }Panel stretches to parent's height
Gotcha
height: 100% only works if every ancestor has a defined height; use min-height or viewport units for full-page sections.
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.
max-width
Caps how wide an element can grow, overriding width when the two conflict. Essential for readable line lengths and responsive containers.
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.