CSS height Property

The CSS height property specifies the height of an element's box. By default, it sets the content area's height, while box-sizing: border-box makes it include padding and border.

height is not inherited by default, and its initial value is auto.
The height can be specified using lengths, percentages, or intrinsic sizing keywords.
min-height and max-height can constrain the height specified by height.

Example 1: CSS height Property with auto

This example uses height: auto, allowing the browser to calculate the element's height according to its content.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS height Property</title>

  <style>
    .box {
      height: auto;
      color: white;
      font-size: 24px;
      background-color: green;
      padding: 15px;
    }
  </style>
</head>
<body>

  <h2>CSS height Property</h2>

  <div class="box">
    GeeksforGeeks: A computer science portal
  </div>

</body>
</html>

Output: The box's height is calculated automatically based on its content and padding.

Syntax

height: auto;
height: <length-percentage>;
height: min-content | max-content | fit-content | stretch;
height: initial | inherit | unset | revert | revert-layer;

Example 2: CSS height Property with a Fixed Value

This example sets the content height of an element to 100px.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Fixed Height</title>

  <style>
    .box {
      height: 100px;
      color: white;
      font-size: 24px;
      background-color: green;
      padding: 15px;
      border: 5px solid black;
    }
  </style>
</head>
<body>

  <h2>CSS height with a Fixed Value</h2>

  <div class="box">
    GeeksforGeeks: A computer science portal
  </div>

</body>
</html>

Output: The content area has a height of 100px. With 15px padding on each side and 5px borders, the total border-box height is 140px.

Values

Value	Description
auto	The browser calculates the height based on the element's layout and content.
length	Specifies the height using units such as px, cm, em, or rem. Negative lengths are invalid.
percentage	Specifies the height as a percentage of the containing block's height. If the containing block's height is not explicitly defined, the percentage generally computes to auto for non-absolutely positioned elements.
min-content	Specifies the intrinsic minimum height of the content.
max-content	Specifies the intrinsic preferred height of the content.
fit-content	Fits the content within the available space, subject to intrinsic size limits.
stretch	Makes the element's margin box fill the height of its containing block. Support can vary across browsers.
initial	Sets the height to its initial value, auto.
inherit	Uses the parent's computed height.
unset	Acts as inherit for inherited properties and initial for non-inherited properties; height is non-inherited.
revert	Reverts the property to the value established by the previous cascade origin.
revert-layer	Reverts the property to the value from a previous cascade layer.

Values

Explore