Open In App

CSS min-height Property

Last Updated : 13 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The min-height property in CSS is used to set the minimum height of an element. The min-height property is used when the content of the element is smaller than the min-height and if the content is larger than the min-height then it has no effect. This property ensures that the value of the height property is not less than the specified min-height value of the element in consideration. 

Syntax:

min-height: length|initial|inherit; 

Property Value:

  • length: This property is used to set the min-height. The default value of length is 0. The height can be set in the form of px, %, cm etc. 
  • initial: It is used to set the value of min-height property to its default value. 
  • inherit: This property is inherited from its parent.

Example: In this example, we are using the min-height: length property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        min-height property
    </title>
 
    <style>
        p {
            min-height: 10px;
            border: 1px solid black;
        }
    </style>
</head>
 
<body>
    <p>
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>
</body>
</html>


Output: min height

Example: In this example, we are using the min-height: initial property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        min-height property
    </title>
 
    <style>
        p {
            min-height: initial;
            border: 1px solid black;
        }
    </style>
</head>
 
<body>
    <p>
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>
</body>
</html>


Output: min height

Supported Browsers: The browser supported by min-height property are listed below:

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 7.0
  • Firefox 3.0
  • Safari 1.3
  • Opera 4.0


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads