The CSS height property sets an element’s vertical size. For block-level elements such as div and p, the browser normally grows the box tall enough to hold its content; height lets you override that automatic result. Inline elements such as span and a ignore width and height unless you change their display behavior. section 9.2
Use height with a little care:
- Set height with CSS units such as px, em, rem, vw, vh, percentages, or auto. section 9.2
- Avoid fixed heights for text when possible; changing content and other variables may make the text overflow or fail to fit. section 9.2
- Use display: inline-block when an inline element needs width, height, and other block-related properties. section 9.2
- Remember that height belongs to the element’s dimensions within the CSS box model, alongside content, padding, border, and margin. section 9.7
Keep a responsive image’s proportions
For an image that should shrink with its parent without becoming larger than its original width, write: img { max-width: 100%; height: auto; }. The browser calculates the height from the current width, preserving the image’s original aspect ratio. When height should not exceed the original height instead, use max-height: 100% and width: auto. section 14.7
img {
max-width: 100%;
height: auto;
}
Inspect the compact fluid-image rule that pairs max-width: 100% with height: auto. section 14.7
