Which property specifies the top margin of an element in CSS ?

Which property specifies the top margin of an element in CSS ?

Last Updated : 30 May, 2023

In this article, we are going to discuss the margin-top property that specifies the top margin of an element.

In order to specify the top margin of an element, CSS provides a styling element called margin-top which sets the top margin of an element. This property accepts an integer value. The default value is 0 and negative values are also allowed. The syntax of the margin-top property is given below.

Syntax:

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

Property Values:

length: The length parameter specifies the length of the top margin in px, cm, %.
auto: The browser itself auto-sets the top margin.
initial: Sets the property to the default value.
inherit: It inherits the property value from the parent components.

Let's look into a few examples of specifying the top margin of an element.

Example 1: In this example let's see the difference between an element having a top margin and an element without top-margin property.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        p#p1 {
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <h2>Welcome To GFG</h2>
    <p id="p1">Top Margin set to 50px</p>


    <p>No top margin</p>

</body>
</html>

Output:

Example 2: Here in the below code Let's try to apply each property value of top-margin to the <h4> elements.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            margin-top: 1.5cm;
        }

        h4.p1 {
            margin-top: 20px;
        }

        h4.p2 {
            margin-top: 8%;
        }

        h4.p3 {
            margin-top: auto;
        }

        h4.p4 {
            margin-top: initial;
        }

        h4.p5 {
            margin-top: inherit;
        }
    </style>
</head>

<body>
    <h4 class="p1">Top-margin:20px</h4>
    <h4 class="p2">Top-margin:8%</h4>
    <h4 class="p3">Top-margin:auto</h4>
    <h4 class="p4">Top-margin:initial</h4>
    <div class="parent">
        <h4 class="p5">Top-margin:inherit</h4>
    </div>
</body>
</html>

Output:

Which property specifies the top margin of an element in CSS ?

A

akhilvasabhaktula03

Improve

Article Tags :

Similar Reads

Which property specifies the right padding of an element in CSS ?

In this article, we will discuss the property that specifies the right padding of an element. The margin-right property in CSS is used to set the right margin of an element. It sets the margin-area on the right side of the element. Negative values are also allowed. The default value of the margin-ri

Which property is used to set the background image of an element using CSS ?

In this article, we will see the property used for setting the background image of an element in CSS. The background image can be set using the background-image property that is used to set one or more background images for an element. By default, it places the image in the top left corner. To speci

Which property is used to set the height of a box in CSS ?

In this article, we will learn about the property that is responsible to set the height of a box. CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you

Which property specifies the width of a border in CSS ?

In this article, we will learn to set the border's size of any element using the CSS border-width property. It can take up to 4 values. Users can consider the below values for the border-width property and use them according to their requirements. border-width property values: Thin: It specifies the

How to set the margins of a paragraph element using CSS ?

The CSS margins properties are used to make space around components, outside any characterized borders. With CSS, you have full power over the margins. There are properties for setting the edge for each side of a component (top, right, base, and left). CSS has properties for indicating the edge for