min-height - HTML CSS CSS Property

HTML CSS examples for CSS Property:min-height

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

Description

The min-height CSS property sets the minimum height of the content area of an element.

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

The following table summarizes the min-height Property.

Item Value
Default value: 0
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: 

min-height:      length | percentage | initial | inherit

Property Values

The following table describes the values of this property.

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

The example below shows the min-height property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS min-height property</title>
  <style type="text/css">
    p {<!--from w  ww.  ja v a  2 s  .com-->
        min-height: 100px;
        background: #f0e68c;
    }
    div {
        height: 200px;
        min-height: 300px;
        background: #ffc0cb;
    }
</style>
 </head>
 <body>
  <p>Enter some more line of text to see how it works.</p>
  <div>
   The minimum height of this div element is set to 300px, so it can't be smaller than that.
  </div>
 </body>
</html>

Related Tutorials