The CSS `height` property sets how tall an element’s box should be. It is useful when a design needs a specific-sized card, a visible strip, or a link that stays square. section 9.2 section 9.2.3 section 11.5.3
Size a card and its details
A virtual credit card uses `.card-item { max-width: 430px; height: 270px; margin: auto; }`. On its back, an otherwise empty `<div>` becomes a visible band with `height: 50px` and a background color. The band takes the available width because the `<div>` is a block-level element; padding on the card’s back moves it 30px down. section 9.2 section 9.2.3
Height can also work with width to establish a shape. Share links set both to `48px`, then use `border-radius: 50%` for circular borders. Flexbox centers a `24px` icon inside each link. A transparent border reserves space so showing the border on hover or focus does not shift nearby content. section 11.5.3
When an inner container must fill a card without overrunning its spacing, account for that spacing in the height. A card content panel with `1rem` of margin and `1rem` of padding on each side uses `height: calc(100% - 4rem)`. Grid then arranges its heading, body, and link in `min-content auto min-content` rows to align the links across cards. section 5.4.2
Listing 5.14 Inner container layout adjustments
main > section > div {
background-color: rgba(0, 0, 0, .75);
margin: 1rem;
padding: 1rem;
color: whitesmoke;
text-align: center;
height: calc(100% - 4rem);
display: grid;
grid-template-rows: min-content auto min-content;
align-items: center;
}
section h2 {
font-size: 1.3rem;
font-weight: bold;
line-height: 1.2;
margin-bottom: 0;
}
See the calculated height alongside the card panel’s margin, padding, and grid layout. section 5.4.2
