X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS margin-top Property

The margin-top property is used to define how much top margin will be given for an element.

Negative values are allowed.

This property has no effect on inline elements, like <span>.

Initial Value 0
Applies to All elements. It also applies to ::first-letter.
Inherited No.
Animatable Yes. Top margin of the element is animatable.
Version CSS2
DOM Syntax object.style.marginTop = "50px";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .margin-top { 
      margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-top property example</h2>
    <p>No specified margin.</p>
    <p class="margin-top"> 100px margin is specified top for this text.</p>
  </body>
</html>

In the following example the margin-top is specified by "em":

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
      margin-top: 5em;
      }
    </style>
  </head>
  <body>
    <h2>Margin-top property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Values

Value Description
auto Sets the top margin. It is the default value of this property.
length Defines a top margin in px, pt, cm, etc. Default value is 0.
% Sets the top margin in % of containing element.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Practice Your Knowledge

In the following code snippet, what value is given for the top margin: margin: 8px 15px 7px 10px;



Do you find this helpful?

Related articles