margin-top

The margin-top CSS property sets the margin area on the top of an element. A positive value will place it farther than normal from its neighbors, while a negative value will place it closer.

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

The effect of the CSS margin-top property on the element box

Initial value	`0`
Applies to	all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`.
Inherited	no
Percentages	refer to the width of the containing block
Media	visual
Computed value	the percentage as specified or the absolute length
Animation type	a length
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

The margin-top property is specified as the keyword auto, or a <length>, or a <percentage>. Its value can be positive, zero, or negative.

Values

<length>: The size of the margin as a fixed value.
<percentage>: The size of the margin as a percentage, relative to the width of the containing block.
auto: The browser selects a suitable value to use. See margin.

Formal syntax

<length> | <percentage> | auto

Examples

.content { margin-top:   5%; }
.sidebox { margin-top: 10px; }
.logo    { margin-top: -5px; }
#footer  { margin-top:  1em; }

Specifications

Specification	Status	Comment
CSS Basic Box Model The definition of 'margin-top' in that specification.	Working Draft	No significant change
CSS Transitions The definition of 'margin-top' in that specification.	Working Draft	Defines `margin-top` as animatable.
CSS Level 2 (Revision 1) The definition of 'margin-top' in that specification.	Recommendation	Removes its effect on inline elements.
CSS Level 1 The definition of 'margin-top' in that specification.	Recommendation	Initial definition

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	3.0	3.5	1.0 (85)
`auto` value	1.0	(Yes)	1.0 (1.7 or earlier)	6.0 (strict mode)	3.5	1.0 (85)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	(Yes)	1.0 (1)	6.0	6.0	1.0