CSS - margin-top

The effect of the CSS margin-top property on the element boxThe margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.

Example

 

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

Syntax  

CSS
/* <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;

Values

<length>
Specifies a fixed width. See <length> for possible values.
<percentage>
A <percentage> always relative to the width of the containing block.
auto
See margin.

Formal syntax

CSS
<a title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0" href="css/length"><length></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/percentage"><percentage></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> auto

Description  

The effect of the CSS margin-top property on the element boxThe margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.

This property has no effect on non-replaced inline elements, like <tt> or <span>.

Initial value0
Applies toall elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
Inheritedno
Percentagesrefer to the width of the containing block
Mediavisual
Computed valuethe percentage as specified or the absolute length
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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 Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0 (85)
auto value 1.0 1.0 (1.7 or earlier) 6.0 (strict mode) 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/margin-top

CSS CSS Property Reference