CSS height Property

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)

Example

#

An element with a height of 400-pixels. It has sufficient space for additional content.

Paul Cézanne

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.

Syntax

height: auto | length | initial | inherit;

Values

#

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.

More Examples

Click the buttons to see the different height values.
(Note: % does nothing because there is no fixed-height containing element.)

Paul Cézanne

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>

Browser support

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

You may also like

Guides