max-height - HTML CSS CSS Property

HTML CSS examples for CSS Property:max-height

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. max-height

Description

The max-height CSS property sets the maximum height of the element content area.

This maximum height does not include padding, borders, or margins.

The following table summarizes the max-height Property

Item Value
Default value: none
Applies to:All elements except non-replaced inline elements, table rows, and row groups
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


max-height:      length | percentage | none | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length Set the maximum height as a length value in px, pt, cm, em, etc. Negative length values are not allowed.
percentage Set the maximum height in percentage. The percentage is calculated against the height of the element's containing block. Negative percentage values are not allowed.
none The height has no maximum value. This is default value.
initialSets this property to its default value.
inherittake the value of its parent element max-height property.

The example below shows the max-height property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS max-height property</title>
  <style type="text/css">
    p {<!--from  www.j ava2  s.c  o  m-->
        max-height: 100px;
        background: #ffc0cb;
    }
    div {
        height: 200px;
        max-height: 100px;
        background: #f0e68c;
    }
</style>
 </head>
 <body>
  <p>Enter some more line of text to see how it works.</p>
  <div>
   The maximum height of this div element is set to 100px, so it can't be taller than that.
  </div>
 </body>
</html>

Related Tutorials