CSS | margin-top Property

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    margin-top property

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

    Syntax:

    margin-top: auto;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    margin-top property

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

    Syntax:

    margin-top: initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    margin-top property

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

    Syntax:

    margin-top: inherit;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.