The margin-top property sets the margin area on the top of an element. A positive value moves the element farther from neighbors above; a negative value pulls it closer.
It is part of the box model (outside the border), is not inherited, and has no effect on non-replaced inline elements such as <span>. Prefer margin-block-start when you want spacing that follows writing mode.
Not deprecated. Core length, percentage, and auto values work across modern browsers.
margin-top: <length> | <percentage> | auto | inherit;Example: margin-top: 1.5rem;. Values may be positive, zero, or negative.
| Value | Description | Try it |
|---|---|---|
<length> | Fixed size such as 16px or 1em | Try it |
<percentage> | Relative to the containing block’s width (inline size) | Try it |
auto | Browser chooses a used value (often 0 for top alone) | Try it |
| Negative length | Pulls the element closer to content above | Try it |
0 / initial | No top margin (initial value is 0) | Try it |
inherit | Takes the parent’s margin-top | Try it |
margin-topUse it to space a block away from whatever comes before it.
1rem, 24px) or a percentage of the container width.| Piece | Required? | Role |
|---|---|---|
| Block or replaced box | Typical | Inline non-replaced elements ignore margin-top |
| Length or % | Yes (or auto) | Sets the top outer space |
| Inherited | No | Set on each element that needs it |
| Preceding content | To see it | The gap appears after the previous box in normal flow |
Change margin-top on the yellow box and watch the space after the box above.
Each snippet focuses on margin-top. Use Try It Yourself for a live editor.
Add a fixed gap above a box.
<style>
.card {
margin-top: 24px;
}
</style>
<div>Above</div>
<div class="card">Card</div>.card.24px. Outer space appears above its border.Size the top margin from the container width.
<style>
.box {
margin-top: 10%;
}
</style>
<div>Above</div>
<div class="box">Box</div>Pull the box closer to the content above (or overlap).
<style>
.pull {
margin-top: -12px;
}
</style>
<div>Above</div>
<div class="pull">Pull</div>If the gap looks wrong or missing, check these first.
A block’s margin-bottom and the next block’s margin-top may combine into one gap — often the larger value, not the sum.
MDN: margin-top does not affect elements like <span>. Use a block, inline-block, or flex/grid item instead.
Even for top margin, percentages resolve against the containing block’s inline size (width in horizontal writing modes).
Use padding-top for inner space (backgrounds extend into padding). Use margin for space between separate boxes.
For multilingual or vertical layouts, prefer margin-block-start so spacing follows writing mode.
margin-top is a browser CSS property for the box model. Node.js, Deno, and Bun do not apply it.
Length, percentage, and auto values work in all modern browsers and older engines.
Bottom line: Safe for everyday vertical spacing. Remember collapse and the %/width rule. It is not a runtime API.
0. Not inherited.One line: margin-top pushes space above a box — outside the border, after the previous element.
Hide parts of an element using an image as a mask.
8 people found this page helpful