The height property specifies the height of an element.
Height is calculated without the padding, margin, or border.
This property accepts any length value (e.g. px, %, cm)
An element with a height of 400-pixels. It has sufficient space for additional content.
Cézanne is said to have formed the bridge between late 19th-century Impressionism and the early 20th century's new line of artistic enquiry, Cubism. Cézanne's often repetitive, exploratory brushstrokes are highly characteristic and clearly recognizable. He used planes of colour and small brushstrokes that build up to form complex fields.
<style>
.height-container {
border: 1px solid steelblue;
background-color: aliceblue;
padding: 15px;
height: 400px;
}
</style>
<div class="height-container">
<h3>Paul Cézanne</h3>
<p>
Cézanne is said to have formed the bridge
between late 19th-century Impressionism and
the early 20th century's new line of artistic
enquiry, Cubism. Cézanne's often repetitive,
exploratory brushstrokes are highly
characteristic and clearly recognizable.
He used planes of colour and small
brushstrokes that build up to form
complex fields.
</p>
</div>
Tip: Content that does not fit within the specified height can be managed with the overflow property.
height: auto | length | initial | inherit;
| Value | Description |
|---|---|
| auto | Default. Browser calculates the height. |
| length | Sets height in any CSS length value. |
| % | Sets height in percent of the containing element. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different height values.
(Note: % does nothing because there is no fixed-height containing element.)
Cézanne is said to have formed the bridge between late 19th-century Impressionism and the early 20th century's new line of artistic enquiry, Cubism. Cézanne's often repetitive, exploratory brushstrokes are highly characteristic and clearly recognizable. He used planes of colour and small brushstrokes that build up to form complex fields.
<style>
.height-container-example {
border: 1px solid steelblue;
background-color: aliceblue;
padding: 15px;
height: auto;
}
</style>
<div class="height-container-example">
<h3>Paul Cézanne</h3>
<p>
Cézanne is said to have formed the bridge
between late 19th-century Impressionism and
the early 20th century's new line of artistic
enquiry, Cubism. Cézanne's often repetitive,
exploratory brushstrokes are highly
characteristic and clearly recognizable.
He used planes of colour and small
brushstrokes that build up to form
complex fields.
</p>
</div>
This table shows when height support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
7.0 | Jan 2003 |
 Safari
|
1.0 | Jun 2003 |
