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:

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

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!