CSS max-height

The CSS max-height property is used to define the maximum height for an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: purple; color: white; margin: 10px 0;}
      div.a{max-height: 220px;}
      div.b{max-height: 220px;}
   </style>
</head>
<body>
   
   <div class="a">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
   </div>
   
   <div class="b">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea.</p>
   </div>

</body>
</html>

Output

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea.

Note - The max-height property does similar job as of height property, except that, it does not applied (or has no effect) when the height specified element's content is less than the defined maximum height value, as shown in above example.

CSS max-height Syntax

The syntax of max-height property in CSS, is:

max-height: x;

The value of x should be any of the following:

Length - We can use custom length to define the max-height property. For example: 120px, 580px, 12cm etc.
none - Used not to define maximum height. This is the default value
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

Note - The max-height property overrides the height property.

CSS Online Test

« Previous Tutorial Next Tutorial »