CSS margin-top Property

Margin is spacing added to the outside of an element.

The margin-top property specifies the top margin of an element.

Example

#

An element with a 50-pixel margin-top.

An element with a 50px top margin
<div style="margin-top: 50px; background: aliceblue;">
  An element with a 50px top margin
</div>

Using margin-top

The margin-top property accepts any length value, such as, px, %, em, etc.

Margin values can be positive or negative.

Syntax

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

Values

#

Value Description
length Sets the top margin using any CSS length value. Negative values are allowed.
% Sets top margin in percent.
auto Browser calculates the top margin.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different margin-top values.

margin-top: 5%
<style>
  .margin-example {
    background: aliceblue;
    margin-top: 5%;
    padding: 10px;
  }
</style>

<div class="margin-example">
  margin-top: 5%
</div>

Browser support

This table shows when margin-top support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
6.0 Aug 2001
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides