Skip to content
Related Articles

Related Articles

CSS | min-height Property

View Discussion
Improve Article
Save Article
  • Last Updated : 28 Jun, 2022

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 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 form of px, %, cm etc. 

Syntax:

min-height: length;

Example: 

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

  • initial: It is used to set the value of min-height property to its default value. 

Syntax:

min-height: initial;

Example: 

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

  • inherit: This property is inherited from its parent.

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!