W3docs
en
Log in

CSS height Property

The CSS height property sets the height of the element. Try examples with each of this property’s value.

The height property is used to set an element's height. This property does not include padding, borders, or margins. The height property can be specified by "px", "cm", "vh" or by percentages. The default value is "auto".

If the min-height and max-height properties are used, they constrain the height property.

If height is set to one of the numeric values like rem, px, or %, and if the content doesn’t fit inside the specified height, this will cause overflowing. The CSS overflow property specifies how the container will deal with overflowing.

Info

Negative values are not accepted.

Initial Valueauto
Applies toall elements
InheritedNo.
AnimatableYes. Height is animatable.
VersionCSS1
DOM Syntaxobject.style.height = "400px";

Syntax

Syntax of CSS height Property

height: auto | length | initial | inherit;

Example of the height property:

Example of CSS height Property with length value

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        height: 60px;
        background-color: #1c87c9;
        color: #eee;
      }
      p {
        height: 30px;
        background-color: #8ebf42;
        color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Height property example</h2>
    <div>The height of this div element is set to "60px".</div>
    <p>The height of this paragraph is set to "30px".</p>
  </body>
</html>
Try it Yourself »

Result

CSS height Property

Example of the height property with the HTML <image> tag:

Example of CSS height Property with auto and length values

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .height-normal {
        height: auto;
      }
      .height-big {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Height property example</h2>
    <p>Here the height is set to "auto"</p>
    <img class="height-normal" src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
    <br />
    <hr />
    <p>The height for this image is defined as "100px".</p>
    <img class="height-big" src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
  </body>
</html>
Try it Yourself »

Example of the height property with the "length" value:

Example of CSS height Property when using vh value

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .container {
        height: 50vh;
        border: 2px solid #1c87c9;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Height property example</h2>
    <div class="container">
      <p>Here the height is specified as "50vh".</p>
    </div>
  </body>
</html>
Try it Yourself »

Example of the height property with all the values:

Example of CSS height Property with auto, vh, % and px values

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .red-container {
        height: 30vh;
        border: 2px solid #f45e30;
        color: #f45e30;
      }
      .blue-container {
        height: 40%;
        width: 30%;
        border: 2px solid #1c87c9;
        color: #1c87c9;
        margin-top: 20px;
      }
      .orange-container {
        height: 100px;
        border: 2px solid #f9fc35;
        color: #f9fc35;
        margin-top: 20px;
      }
      .green-container {
        height: auto;
        border: 2px solid #8ebf42;
        color: #8ebf42;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Height property example</h2>
    <div class="red-container">
      Height 30vh
      <div class="blue-container">
        Height 40%
      </div>
    </div>
    <div class="orange-container">
      Height 100px;
    </div>
    <div class="green-container">
      Height (auto)
    </div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
autoWhen we use this value, the browser calculates the original height of the image or box. This is the default value of this property.Play it »
lengthDefines the height with px, cm, em, rem, vh, etc.Play it »
%Defines the height with percent.
initialMakes the property use its default value.Play it »
inheritInherits the property from its parent element.

Practice

Practice

What are the possible settings for the height property in CSS?