Categories
CSS Web development

CSS min-height Property



CSS min-height Property

The CSS min-height property specifies the minimum height of an element.

The CSS min-height property prevents the value of the height property from becoming smaller than the min-height.

Syntax:

min-width: length;

length – specifies the height in px, %, etc (read also Units in CSS).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example-1, .example-2 {
  background-color: #e9c46a;  
}

.example-2 {
  min-height: 150px;
}
</style>
</head>
<body>

<h4>*no min-height specified</h4>
<p class="example-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

<h4>min-height: 150px:</h4>
<p class="example-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

</body>
</html>

Output:

*no min-height specified

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit…

min-height: 150px:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit…


Enjoy coding!

Read also:

CSS min-width Property

CSS clear Property

CSS margin Property