The CSS height property sets an element’s vertical size. For block-level elements such as div and p, the browser normally makes the box tall enough to hold its content; height lets you take control. section 9.2
Keep these small rules in mind:
- Use measurements such as px, em, rem, vw, vh, percentages, or auto. section 9.2
- Treat auto as the natural choice when the browser should size the element from its content. section 9.2
- Avoid fixed heights for text when possible: changing content, fonts, or screen sizes may make the text no longer fit. section 9.2
- Remember that width and height are ignored on inline elements; use display: inline-block or display: block when you need those dimensions. section 9.2
A gentle height rule
.card { height: 12rem; } This gives the card a fixed vertical size. Try replacing 12rem with auto and add more text: the card can then grow naturally with its contents. For responsive images, pair height: auto with max-width: 100%. section 9.2 section 14.13
