Height property
A height property specifies or reports an element’s vertical dimension.
CSS in Depth, Second Edition
The height property specifies the vertical extent of an element's content box or other applicable box.
- How it is used
- Guides vertical sizing in normal flow, viewport layouts, positioned elements, and animated dropdowns.
- How deep it goes
- Explains content-driven sizing, percentage-height failure, positioned elements, and JavaScript-assisted transitions, stopping short of full layout internals.
- Examples
- Uses full-screen containers, equal-height columns, fixed navigation, and a dropdown transitioning between zero and measured height.
- What you can do after
- Apply height safely in CSS and coordinate explicit pixel values with JavaScript when animating content-dependent dimensions.
Read how CSS in Depth, Second Edition explains height property →
Tiny CSS Projects
The CSS height property specifies the height of an element's box.
- How it is used
- Uses height to size visible UI parts and keep card content and share-link shapes aligned.
- How deep it goes
- Works through fixed pixel heights and one calculated percentage height, without explaining height-sizing internals.
- Examples
- Shows a 270px credit card, a 50px strip, a calculated-height card panel, and 48px square share links.
- What you can do after
- Apply it via CSS declarations to size card details, align card content, and make square share links.
Web Design Playground, Second Edition
The CSS height property specifies the vertical size of an element's content box or replaced content.
- How it is used
- Controls element dimensions while teaching box-model sizing and responsive image behavior.
- How deep it goes
- Explains units, display behavior, fixed-height cautions, and image proportions, but stops short of advanced height calculations.
- Examples
- Uses block-level text elements, inline elements, and fluid img rules as concrete sizing examples.
- What you can do after
- Apply height to size block elements cautiously and preserve image proportions with height: auto.
Read how Web Design Playground, Second Edition explains height property →
Web Design Playground
A CSS property that sets an element's vertical size.
- How it is used
- Controls block-level element height when overriding the browser’s content-based sizing, while supporting responsive image sizing.
- How deep it goes
- Explains defaults, units, inline limitations, responsive images, and risks of fixed text heights without detailing the full box model.
- Examples
- Uses block and inline element behavior, fixed measurements, auto sizing, and fluid images as practical examples.
- What you can do after
- Apply height with CSS units, choose auto for content-driven sizing, and create responsive images with height auto.
Related concepts
- autoconfigured by · auto is a CSS keyword whose value is determined by the relevant property’s rules, layout algorithm, available space, and content.
- offsetHeightmeasured by · A DOM element property that reports an element's layout height in pixels, including padding and borders in the browser's box model.
- calc()configured by · The CSS calc() function evaluates an arithmetic expression involving compatible CSS values and units to produce a computed value.
- proportionused by · A proportion is a ratio expressing a part or quantity relative to a whole or reference quantity, commonly represented as a fraction, decimal, or percentage.
- getBoundingClientRectproduced by · getBoundingClientRect is a DOM method that returns an element's size and position relative to the viewport.
- transitionused by · A CSS transition interpolates changes in a CSS property’s computed value over time when that value changes.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.