CSS Margin Top Property

Last Updated Jul 21, 2015, 12:00:06 PM




CSS Margin Top

The CSS margin-top property sets the margin space required on the top of an element

A negative value is also allowed.

Syntax
​x
 
/* length values */
margin-top: 10px;        /* An absolute length */
margin-top: 1em;         /* A length relative to the text size */
margin-top: 5%;          /* A margin relative to the nearest block container's width */
/* Keyword values */
margin-top: auto;
/* Global values */
margin-top: inherit;
margin-top: initial;
margin-top: unset;
​

Definition and Usage

Initial Value 0
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited no
Percentages refer to the width of the containing block
Media Visual
Computed Value the percentage as specified or the absolute length
Animatable Yes, as a length
Canonical Order The unique non-ambiguous order defined by the formal grammer

Example1

 
margin-top: 100px;
​
Watch GIF Try It Now

Example2

 
margin-top: 10%;
​
Try It Now

Browser compatibility
Feature
Basic support 1.0 1.0 (1.7 or earlier) 1.0 3.5 3.0 1.0 1.0


Other Advanced CSS Margin Properties you might want to Learn

CSS margin-right property

CSS margin-left property

CSS margin-bottom property





Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM