Open In App

CSS margin-top Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

 margin-top property

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:

 margin-top property

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:

 margin-top property

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:

 margin-top property

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: 

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


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads