The margin-bottom property sets the margin area on the bottom of an element. A positive value moves neighbors farther away; a negative value pulls them 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-end when you want spacing that follows writing mode.
Not deprecated. Core length, percentage, and auto values work across modern browsers.
margin-bottom: <length> | <percentage> | auto | inherit;Example: margin-bottom: 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 bottom alone) | Try it |
| Negative length | Pulls following content closer or into the element | Try it |
0 / initial | No bottom margin (initial value is 0) | Try it |
inherit | Takes the parent’s margin-bottom | Try it |
margin-bottomUse it to space a block away from whatever comes after it.
1rem, 24px) or a percentage of the container width.| Piece | Required? | Role |
|---|---|---|
| Block or replaced box | Typical | Inline non-replaced elements ignore margin-bottom |
| Length or % | Yes (or auto) | Sets the bottom outer space |
| Inherited | No | Set on each element that needs it |
| Following content | To see it | The gap appears before the next box in normal flow |
Change margin-bottom on the yellow box and watch the space before the next box.
Each snippet focuses on margin-bottom. Use Try It Yourself for a live editor.
Add a fixed gap below a box.
<style>
.card {
margin-bottom: 24px;
}
</style>
<div class="card">Card</div>
<div>Next</div>.card.24px. Outer space appears below its border.Size the bottom margin from the container width.
<style>
.box {
margin-bottom: 10%;
}
</style>
<div class="box">Box</div>
<div>Next</div>Pull the next box closer (or overlap).
<style>
.pull {
margin-bottom: -12px;
}
</style>
<div class="pull">Pull</div>
<div>Closer</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-bottom does not affect elements like <span>. Use a block, inline-block, or flex/grid item instead.
Even for bottom margin, percentages resolve against the containing block’s inline size (width in horizontal writing modes).
Use padding-bottom for inner space (backgrounds extend into padding). Use margin for space between separate boxes.
For multilingual or vertical layouts, prefer margin-block-end so spacing follows writing mode.
margin-bottom 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-bottom pushes space under a box — outside the border, before the next element.
Set both inline-start and inline-end margins together.
8 people found this page helpful