W3docs
en
Log in

CSS margin-top Property

The margin-top CSS property is used for setting the top margin of the element. See property values and examples.

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

Info

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.

Info

Negative values are allowed.

Initial Value0
Applies toAll elements. It also applies to ::first-letter.
InheritedNo.
AnimatableYes. Top margin of the element is animatable.
VersionCSS2
DOM Syntaxobject.style.marginTop = "50px";

Syntax

Syntax of CSS margin-top Property

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

Example of the margin-top property:

Example of CSS margin-top Property with px value

<!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>
Try it Yourself »

Result

CSS margin-top Property

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

Example of CSS margin-top Property with em value

<!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>
Try it Yourself »

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>
Try it Yourself »

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>
Try it Yourself »

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>
Try it Yourself »

Values

ValueDescriptionPlay it
autoSets the top margin. It is the default value of this property.Play it »
lengthDefines a top margin in px, pt, cm, etc. Default value is 0.Play it »
%Sets the top margin in % of containing element.Play it »
initialMakes the property use its default value.Play it »
inheritInherits the property from its parents element.

Practice

Practice

What is the function of the 'margin-top' property in CSS?