Skip to content
Related Articles

Related Articles

Improve Article

CSS | margin-top Property

  • Last Updated : 09 Aug, 2019

The margin-top property in CSS is used to set the top margin of an element. It sets the margin-area on the top of the element. The default value of the margin-top property is 0.

Syntax:

margin-top: length|auto|initial|inherit;

Property values:

  • length: It is used to specify the length of margin with a fixed value. This value can be positive, negative or zero.

    Syntax:

    margin-top: length;

    Example:






    <!DOCTYPE html>
    <html>
        <head>
            <title>margin-top property</title>
              
            <!-- margin-top CSS property -->
            <style>
                p {
                    margin-top:50px; 
                    background-color:green;
                }
            </style>
        </head>
              
        <body style = "background-color:lightgreen;">
              
            <!-- margin-top property used here -->
            <p style = "">
                This paragraph has 50px top margin .
            </p>
        </body>
    </html>                    

    Output:
    margin-top property

  • percentage (%): It is used to specify the amount of margin as a percentage relative to the width of the containing element.

    Syntax:

    margin-top: %;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>margin-top property</title>
              
            <!-- margin-top CSS property -->
            <style>
                p {
                    margin-top:5%; 
                    background-color:green;
                }
            </style>
        </head>
              
        <body style = "background-color:lightgreen;">
              
            <!-- margin-top property used here -->
            <p style = "">
                This paragraph has 5% top margin .
            </p>
        </body>
    </html>                    

    Output:
    margin-top property

  • auto: This property is used when margin-top is determined by the browser.

    Syntax:

    margin-top: auto;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>margin-top property</title>
              
            <!-- margin-top CSS property -->
            <style>
                h3 {
                    margin-top:auto; 
                    background-color:green;
                }
            </style>
        </head>
              
        <body style = "background-color:lightgreen;">
              
            <!-- margin-top property used here -->
            <h3 style = "">
                margin-top: auto;
            </h3>
        </body>
    </html>                    

    Output:
    margin-top property

  • initial It is used to set margin-top property to its default value.

    Syntax:

    margin-top: initial;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>margin-top property</title>
              
            <!-- margin-top CSS property -->
            <style>
                h3 {
                    margin-top:initial; 
                    background-color:green;
                }
            </style>
        </head>
              
        <body style = "background-color:lightgreen;">
              
            <!-- margin-top property used here -->
            <h3 style = "">
                margin-top: initial;
            </h3>
        </body>
    </html>                    

    Output:
    margin-top property

  • inherit: It is used when margin-top property is inherited from its parent.

    Syntax:

    margin-top: inherit;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <title>margin-top property</title>
              
            <!-- margin-top CSS property -->
            <style>
                .gfg {
                    margin-top:100px;
                }
                h3 {
                    margin-top:inherit; 
                    background-color:green;
                }
            </style>
        </head>
              
        <body style = "background-color:lightgreen;">
              
            <div class = "gfg">
                  
                <!-- margin-top property used here -->
                <h3 style = "">
                    margin-top: inherit;
                </h3>
            </div>
        </body>
    </html>                    

    Output:
    margin-top property

Note: Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins. This does not happen on horizontal (left and right) margins but only in case of vertical (top and bottom) margins. It is called Margin Collapse.

Supported Browsers: The browser supported by margin-top property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 6.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :