CSS propertyBox model
height
Sets the height of an element.
- Initial value
auto- Inherited
- No
- Animatable
- yes, as a length or percentage
- Applies to
- all elements except non-replaced inline elements (e.g. `<span>`), table rows, and row groups
- JavaScript
element.style.height = "120px"
Example
#CSS
.hero {
min-height: 160px;
display: grid;
place-items: center;
}Example HTML
<section class="hero stage">
<strong>Start learning to code</strong>
</section>Preview
Definition and usage
#The height property sets the height of an element’s content area. By default (auto) the element is exactly as tall as its content, which is usually the best setting.
A percentage height only works when the parent has an explicit height. If the parent’s height depends on its content, height: 50% behaves like auto.
A fixed height is a common trap: once there’s more content (longer text, a larger user font size), it spills outside the element. min-height is the safer choice.
Syntax
#Syntax
height: auto | <length> | <percentage> | min-content | max-content | fit-content;Values
#Values in practice
#auto
The height comes from the content.
.demo { height: auto; }100px
A fixed height.
.demo { height: 100px; }100%
The parent’s full height. This works here because the parent in the demo has
height: 150px..demo { height: 100%; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- For blocks with text, use
min-heightinstead ofheightso the content doesn’t spill outside the element. - If
height: 100%doesn’t work, check whether the parent has a defined height.
Related entries
#Spotted a mistake or missing an example? Write to us.