CSS margin-top Property

The margin-top property in CSS is used to add space above an element. It helps control the layout and spacing between elements on a webpage.

It sets the top margin area of an element.
The default value of margin-top is 0.
It can be defined using values like px, %, em, or auto.

Syntax:

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

Property values:

length: It is used to specify the length of the 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 the browser determines margin-top.
initial: It is used to set the margin-top property to its default value.
inherit: It is used when the margin-top property is inherited from its parent.

Example: Here, we use margin-top: length; property.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>margin-top property</title>

<!--Driver Code Ends-->

    <!-- margin-top CSS property -->
    <style>
        p {
            margin-top: 50px;
            background-color: green;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body style="background-color:lightgreen;">

    <!-- margin-top property used here -->
    <p style="">
        This paragraph has 50px top margin .
    </p>
</body>
</html>
<!--Driver Code Ends-->

Example: Here, we are using margin-top: %; property.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>margin-top property</title>

<!--Driver Code Ends-->

    <!-- margin-top CSS property -->
    <style>
        p {
            margin-top: 5%;
            background-color: green;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body style="background-color:lightgreen;">

    <!-- margin-top property used here -->
    <p style="">
        This paragraph has 5% top margin .
    </p>
</body>
</html>
<!--Driver Code Ends-->

Example: Here, we are using margin-top: auto; property.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>margin-top property</title>

<!--Driver Code Ends-->

    <!-- margin-top CSS property -->
    <style>
        h3 {
            margin-top: auto;
            background-color: green;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body style="background-color:lightgreen;">

    <!-- margin-top property used here -->
    <h3 style="">
        margin-top: auto;
    </h3>
</body>
</html>
<!--Driver Code Ends-->

Example: Here, we are using margin-top: initial; property.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>margin-top property</title>

<!--Driver Code Ends-->

    <!-- margin-top CSS property -->
    <style>
        h3 {
            margin-top: initial;
            background-color: green;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body style="background-color:lightgreen;">

    <!-- margin-top property used here -->
    <h3 style="">
        margin-top: initial;
    </h3>
</body>
</html>
<!--Driver Code Ends-->

Example: Here, we are using margin-top: inherit; property.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>margin-top property</title>

<!--Driver Code Ends-->

    <!-- margin-top CSS property -->
    <style>
        .gfg {
            margin-top: 100px;
        }

        h3 {
            margin-top: inherit;
            background-color: green;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body style="background-color:lightgreen;">

    <div class="gfg">

        <!-- margin-top property used here -->
        <h3 style="">
            margin-top: inherit;
        </h3>
    </div>
</body>
</html>
<!--Driver Code Ends-->

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.

Explore