CSS margin-top Property

CSS margin-top property sets the margin of the top of an element. It can be specified in any valid CSS length formats such as ‘px’, ’em’, ‘rem’ or even in percentage(%).

It can have a positive, negative or zero value.

Example:

div{
  margin-top: 100px;
}

It is also possible to set a negative margin. In such a scenario, the element either pulls itself away from the neighboring elements or pulls the neighboring elements towards it and the content starts overlapping. See the example below:

Example:

p{
  margin-top: -40px;
}

CSS Syntax

The margin-top property has the following syntax:

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

Property Values

The margin-top property accepts the following values:

lengthSets a fixed top margin in CSS length formats such as ‘px’, ’em’, ‘rem’, etc. It can be positive, negative or zero. The default value is zero(0).
percentageSets top margin in percentage. The percentage value is calculated by taking the percentage of the element’s width itself.
autoThe browser itself calculates the margin value.
initialSets the margin-top property to its default value(0).
inheritInherits the margin-top property from the parent element.

General Info

Default Value0
InheritedNo
JavaScript Usageelement.style.marginTop = “50px”