Skip to main content

Css Margin-top Example


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

This property has no effect on non-replaced inline elements, such as <span> or <code>.


Syntax


/* <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 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 definition



























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 and ::first-line.
Inheritedno
Percentagesrefer to the width of the containing block
Computed valuethe percentage as specified or the absolute length
Animation typea length

Formal syntax


<length> | <percentage> | auto

Examples


Setting positive and negative top margins


.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.
Candidate Recommendation No significant change
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

Browser compatibility

























































DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
margin-top
1
12
1
3
3.5
1
1
18
4
10.1
1
1.0
auto
1

12

The auto value is not supported in quirks mode.

1

6

The auto value is not supported in quirks mode.

3.5
1
37
18
4
14
1
1.0

See also




Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android SDK Location Should Not Contain Whitespace, As This Cause Problems With NDK Tools