CSS - height Property

Quiz

CSS height property specifies the height of an element. It determines how tall an element will be, affecting its layout and positioning within the document. The property can be applied to block-level elements, inline-block elements, and replaced elements like images.

Syntax

height: auto | length | percentage | min-content | max-content | initial | inherit;

Property Values

Value	Description
auto	The element expands or contracts based on its content. Default.
length	It sets a fixed height for the element using length units (e.g. px, em, rem etc.)
percentage	It sets the height as a percentage of the height of the element's containing block.
min-content	It makes the element's height fit the minimum height required by its content, preventing content from overflowing.
max-content	It adjusts the element height to fit the tallest content without wrapping or truncating it.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Height Property

The following examples explain the height property with different values.

Height Property with Auto Value

To allow the height of an element to be dependent on the length of its content, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .outer {
         background-color: lightgrey;
         height: 200px;
         padding: 10px;
         box-sizing: border-box;
      }

      .inner {
         text-align: center;
         border: 2px solid;
         background-color: lightblue;
         height: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS height property
   </h2>
   <h4>
      height: auto
   </h4>
   <div class="outer">
      <div class="inner">
         This div is having auto height. 
         The height of this div depends on the content.
      </div>
   </div>

</body>

</html>

Height Property with Length Values

To set a fixed height to an element, we use the length units (e.g. px, em, rem etc.). The element will be having a fixed height, if the content of the element is larger than the size of the element, overflow will occur. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .outer {
         background-color: lightgrey;
         height: 200px;
         padding: 10px;
         box-sizing: border-box;
      }

      .inner {
         text-align: center;
         border: 2px solid;
         background-color: lightblue;
      }

      .inner1 {
         height: 40px;
      }

      .inner2 {
         height: 90px;
      }
   </style>
</head>

<body>
   <h2>
      CSS height property
   </h2>
   <h4>
      height: 40px 90px
   </h4>
   <div class="outer">
      <p class="inner inner1">
         This paragraph is having 40px height.
      </p>
      <p class="inner inner2">
         This paragraph is having 90px height.
      </p>
   </div>

</body>

</html>

Height Property with Percentage Values

To set a fixed height to an element, we use the percentage values (e.g. 10%, 20% etc.). The element's height will be relative to the height of its containing block. If the content of the element is greater than the size, overflow will occur. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .outer {
         background-color: lightgrey;
         height: 300px;
         padding: 10px;
         box-sizing: border-box;
      }

      .inner {
         text-align: center;
         border: 2px solid;
         background-color: lightblue;
      }

      .inner1 {
         height: 30%;
      }

      .inner2 {
         height: 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS height property
   </h2>
   <h4>
      height: 30% 50%
   </h4>
   <div class="outer">
      <p class="inner inner1">
         This paragraph is having 30% 
         height of the outer container.
      </p>
      <p class="inner inner2">
         This paragraph is having 50% 
         height of the outer container.
      </p>
   </div>

</body>

</html>

Height Property with Min Content Value

To set the element height to the minimum size required to fit its content without overflow, we use the min-content value. This ensures that the height is just enough to display the content in a single line without wrapping or truncation. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .outer {
         background-color: lightgrey;
         height: 200px;
         padding: 10px;
         box-sizing: border-box;
      }

      .inner {
         text-align: center;
         border: 2px solid;
         background-color: lightblue;
         height: min-content;
      }
   </style>
</head>

<body>
   <h2>
      CSS height property
   </h2>
   <h4>
      height: min-content
   </h4>
   <div class="outer">
      <p class="inner ">
         TutorialsPoint is an online educational
         platform offering a vast range of tutorials
         and courses on programming, web development, 
         data science, and other technical subjects, 
         featuring detailed guides and interactive
         content.
      </p>
   </div>

</body>

</html>

Height Property with Max Content Value

To adjust the element height to fit the tallest content within it, we use the max-content. The height expands to accommodate the largest item or content, ensuring that no content is cut off or wrapped. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .outer {
         background-color: lightgrey;
         height: 200px;
         padding: 10px;
         box-sizing: border-box;
      }

      .inner {
         text-align: center;
         border: 2px solid;
         background-color: lightblue;
         height: max-content;
      }
   </style>
</head>

<body>
   <h2>
      CSS height property
   </h2>
   <h4>
      height: max-content
   </h4>
   <div class="outer">
      <p class="inner ">
         TutorialsPoint is an online educational
         platform offering a vast range of tutorials
         and courses on programming, web development, 
         data science, and other technical subjects, 
         featuring detailed guides and interactive 
         content.
      </p>
   </div>

</body>

</html>

Supported Browsers

Property
height	1.0	4.0	1.0	1.0	7.0

css_reference.htm

Print Page