CSS margin-top Property

The margin-top property is used to define the top margin of an element.

This property does not affect inline elements, like <span>.

The top and bottom margins of an element can collapse into one, which is equal to the largest of the two margins. However, this happens only in the case of vertical margins.

Negative values are allowed.
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 of the margin-top property:

<!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>

Result

Example of the margin-top property specified in "em":

<!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>

Example of the margin-top property specified in "%":

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

Example of the margin-top property with the "initial" value:

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

Example of the margin-top property with the "inherit" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin-top: 50px;
      }
      .margin-top {
        margin-top: inherit;
        background-color: lime;
      }
    </style>
  </head>
  <body>
    <h2>Margin-top property example</h2>
    <div>
      Here is some text.
      <p class="margin-top"> Margin top is specified for this text.</p>
    </div>
  </body>
</html>

Values

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


Browser support

1.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