Skip to content
Related Articles

Related Articles

Improve Article

CSS | min-height Property

  • Last Updated : 02 Jan, 2019

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 then the min-height and if the content is larger then 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:






    <!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:




    <!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
  • Internet Explorer 7.0
  • Firefox 3.0
  • Safari 2.0.2
  • Opera 4.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :