Margin is spacing added to the outside of an element.
The margin-top property specifies the top margin of an element.
An element with a 50-pixel margin-top.
<div style="margin-top: 50px; background: aliceblue;">
An element with a 50px top margin
</div>
The margin-top property accepts any length value, such as, px, %, em, etc.
Margin values can be positive or negative.
margin-top: length | auto | initial | inherit;
| 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. |
Click the buttons to see the different margin-top values.
<style>
.margin-example {
background: aliceblue;
margin-top: 5%;
padding: 10px;
}
</style>
<div class="margin-example">
margin-top: 5%
</div>
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 |
