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.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 3.5+

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