CSS margin-top Property


The margin-top property in CSS is used to set the top margin of an element. It sets the margin-area on the top of the element. The default value of the margin-top property is 0.

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

The margin-top CSS property sets the top margin of the element. However in many cases the shorthand property margin is more convenient to use and preferable.

CSS Syntax

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

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on horizontal (left and right) margins! Only vertical (top and bottom) margins!

In the example above, the <p class="a"> element has a top and bottom margin of 30px. The <p class="b"> element has a top and bottom margin of 20px.

This means that the vertical margin between <p class="a"> and <p class="b"> should be 50px (30px + 20px). But due to margin collapse, the actual margin ends up being 30px!

Supported Browsers: The browser supported by property are listed below:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example -