CSS margin-top - Examples

CSS margin-top Property

CSS margin-top property sets the top margin to HTML Element(s).

The syntax to specify a value for margin-top property is

margin-top: value;

The following table gives the possible values that could be given to margin-top property.

Value	Description	Examples
length	Any valid CSS length unit. Refer CSS Length Units tutorial.	margin-top: 10px;margin-top: 5pt;margin-top: 2cm;
Percentage Value	Margin in percent of the width of the containing element.	margin-top: 20%;
initial	Sets margin-top to default value.	margin-top: initial;
inherit	Inherits margin-top value from its parent element.	margin-top: inherit;

Examples

In the following examples, we set top margin to HTML Element(s) with a few allowed values for margin-top CSS property.

Simple Example

The following is a simple example, where we set margin-top for paragraph with 50px.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <p id="p1">A paragraph with 50px top margin.</p>
</body>
</html>

Different Values for margin-top

The following is a simple example, where we set different margin-top values for paragraphs.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p{
            margin: 0;
        }
        #p1 {
            margin-top: 50px;
        }
        #p2 {
            margin-top: 0px;
        }
        #p3 {
            margin-top: 20px;
        }
        #p4 {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <p id="p1">A paragraph with 50px top margin.</p>
    <p id="p2">A paragraph with 0px top margin.</p>
    <p id="p3">A paragraph with 20px top margin.</p>
    <p id="p4">A paragraph with 10px top margin.</p>
</body>
</html>

margin-top property with CSS Length Units

In the following example, we apply margin-top property to paragraphs with a few different CSS Length Unit values.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p{
            margin: 0;
        }
        #p1 {
            margin-top: 50px;
        }
        #p2 {
            margin-top: 10pt;
        }
        #p3 {
            margin-top: 1in;
        }
    </style>
</head>
<body>
    <p id="p1">A paragraph with 50px top margin.</p>
    <p id="p2">A paragraph with 10pt top margin.</p>
    <p id="p3">A paragraph with 1in top margin.</p>
</body>
</html>

margin-top property with Percentage Values

In the following example, we apply margin-top property to paragraphs with a few different percentage values.

If margin-top is specified in percentage values, and if width of the HTML element changes, then the margin also changes. For example, try to resize the browser window, and observe the top margin for these HTML Elements.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p{
            margin: 0;
        }
        #p1 {
            margin-top: 5%;
        }
        #p2 {
            margin-top: 10%;
        }
        #p3 {
            margin-top: 20%;
        }
    </style>
</head>
<body>
    <p id="p1">A paragraph with 5% top margin.</p>
    <p id="p2">A paragraph with 10% top margin.</p>
    <p id="p3">A paragraph with 20% top margin.</p>
</body>
</html>

margin-top property for a few HTML elements

In the following example, we take a few HTML elements like h1, p, a, and pre, and set margin-top for these.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1, p, a, pre {
            margin: 0;
            display: block;
        }
        h1 {
            margin-top: 50px;
        }
        p {
            margin-top: 50px;
        }
        a {
            margin-top: 50px;
        }
        pre {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <p>A paragraph.</p>
    <a href="#">Anchor Text</a>
    <pre>pre
hello
world</pre>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about margin-top property, and how to use this property for HTML Elements, with examples.