margin-top CSS property
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
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.
Try it
margin-top: 1em;
margin-top: 10%;
margin-top: 10px;
margin-top: 0;
<section id="default-example">
<div id="container">
<div class="row"></div>
<div class="row transition-all" id="example-element"></div>
<div class="row"></div>
</div>
</section>
#container {
width: 300px;
height: 200px;
display: flex;
align-content: flex-start;
flex-direction: column;
justify-content: flex-start;
}
.row {
height: 33.33%;
display: inline-block;
border: solid #ce7777 10px;
background-color: #2b3a55;
flex-shrink: 0;
}
#example-element {
border: solid 10px #ffbf00;
background-color: #2b3a55;
}
This property has no effect on non-replaced inline elements, such as <span> or <code>.
Syntax
css
/* <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 */
margin-top: anchor-size(height);
margin-top: calc(anchor-size(--my-anchor self-inline, 25px) / 4);
/* Keyword values */
margin-top: auto;
/* Global values */
margin-top: inherit;
margin-top: initial;
margin-top: revert;
margin-top: revert-layer;
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.
- For anchor-positioned elements, the
anchor-size()function resolves to a<length>value relative to the associated anchor element's width or height (see Setting element margin based on anchor size).
- For anchor-positioned elements, the
<percentage>-
The size of the margin as a percentage, relative to the inline size (width in a horizontal language, defined by
writing-mode) of the containing block. auto-
The browser selects a suitable value to use. See
margin.
Formal definition
| 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 |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |
Formal syntax
margin-top =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Examples
Setting positive and negative top margins
css
.content {
margin-top: 5%;
}
.side-box {
margin-top: 10px;
}
.logo {
margin-top: -5px;
}
#footer {
margin-top: 1em;
}
Specifications
| Specification |
|---|
| CSS Box Model Module Level 3 # margin-physical |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
margin-top
|
|
|
|
|
|
|
|
|
|
|
|
|
anchor-size()
|
|
|
|
|
|
|
|
|
|
|
|
|
auto
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
See also
margin-right,margin-bottom, andmargin-leftmarginshorthandmargin-block-start,margin-block-end,margin-inline-start, andmargin-inline-endmargin-blockandmargin-inlineshorthands- CSS box model module