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.
percentage (%): It is used to specify the amount of margin as a percentage relative to the width of the containing element.
auto: This property is used when margin-top is determined by the browser.
initial: It is used to set margin-top property to its default value.
inherit: It is used when margin-top property is inherited from its parent.

Example: In this example, we are using margin-top: length; property.

html

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

Example: In this example, we are using margin-top: %; property.

html

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

Example: In this example, we are using margin-top: auto; property.

html

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

Example: In this example, we are using margin-top: initial; property.

html

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

Example: In this example, we are using margin-top: inherit; property.

html

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

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 the 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 and above
Edge 12.0 and above
Internet Explorer 3.0 and above
Firefox 1.0 and above
Opera 3.5 and above
Safari 1.0 and above

html

html

html

html

html

Contact Us