The height property sets the vertical size of an element. By default it defines the height of the content area. With box-sizing: border-box, it defines the height of the border area instead.
It is not inherited. The initial value is auto. min-height and max-height can override it. For logical sizing in writing modes, see block-size.
Fixed heights can clip text when users zoom. Prefer auto or min-height when content may grow.
height: auto | <length> | <percentage> | min-content | max-content | fit-content | initial | inherit;There is also a newer stretch keyword with limited support. Start with auto, lengths, and percentages.
| Value | Description | Try it |
|---|---|---|
auto | Default. Browser sizes the box from content | Try it |
<length> | Fixed size such as 120px, 10em, or 50vh | Try it |
<percentage> | Percent of the containing block’s height | Try it |
fit-content | Uses available space, capped by max-content | Try it |
initial | Resets to auto | Try it |
inherit | Takes the parent’s height | Try it |
heightPick a sizing strategy: grow with content, fix a length, or size relative to a parent or the viewport.
height: auto when content should decide the size.px, rem, vh) for a fixed or viewport-based height.min-height / max-height when the box must flex with content.| Piece | Required? | Role |
|---|---|---|
| Block or replaced element | Yes | Non-replaced inlines ignore height |
height value | Yes | auto, length, percentage, or keyword |
| Parent with set height | For % | Percentage resolves against the containing block |
box-sizing | Optional | Decides if padding/border count inside height |
Change height on the sample box. Watch it grow or shrink while width stays the same.
Each snippet focuses on height. Use Try It Yourself for a live editor.
Set an exact pixel height.
<style>
div {
height: 80px;
}
</style>
<div>80px tall</div>80px is an absolute content height (with default box-sizing).overflow or raise the height.rem, em, or vh the same way.Size a child as half of a parent that has an explicit height.
<style>
.parent {
height: 160px;
}
.child {
height: 50%;
}
</style>
<div class="parent">
<div class="child">Half of parent</div>
</div>160px makes the containing block explicit.50% resolves to 80px here.auto.Let content decide how tall the box is.
<style>
div {
height: auto;
}
</style>
<div>This box grows with its text.</div>Most height bugs come from percentages or clipping.
If the containing block height depends on content (auto), a child height: 50% usually becomes auto.
box-sizing changes what height meansWith border-box, padding and border are included inside the height. With content-box, they add outside it.
min-height / max-height winThose properties override height when they conflict. Check them if a box will not shrink or grow as expected.
A plain span does not take height. Use a block, flex item, or replaced element.
When users zoom, fixed heights may hide content. Prefer flexible sizing for text-heavy boxes.
height is a browser layout property. Node.js, Deno, and Bun do not apply it.
Length, percentage, and auto work everywhere. Keywords like fit-content are widely supported; stretch is newer and limited.
Bottom line: Safe for everyday sizing. Treat stretch as progressive enhancement until support is broad.
box-sizing).auto, lengths, and percentages.auto. Not inherited.auto.One line: height controls how tall the box is — auto from content, or a length / percentage you choose.
Learn which character CSS uses when hyphenating words.
8 people found this page helpful