margin-bottom

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-bottom CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

Try it

margin-bottom: 1em;

margin-bottom: 10%;

margin-bottom: 10px;

margin-bottom: 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;
}

[画像:The effect of the CSS margin-bottom property on the element box]

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

Syntax

css

/* <length> values */
margin-bottom: 10px; /* An absolute length */
margin-bottom: 1em; /* relative to the text size */
margin-bottom: 5%; /* relative to the nearest block container's width */
margin-bottom: anchor-size(width);
margin-bottom: calc(anchor-size(--my-anchor self-block, 20px) / 3);
/* Keyword values */
margin-bottom: auto;
/* Global values */
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: revert;
margin-bottom: revert-layer;
margin-bottom: unset;

The margin-bottom 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).

<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-bottom = 
 <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 bottom margins

HTML

html

<div class="container">
 <div class="box0">Box 0</div>
 <div class="box1">Box 1</div>
 <div class="box2">Box one's negative margin pulls me up</div>
</div>

CSS

CSS for divs to set margin-bottom and height

css

.box0 {
 margin-bottom: 1em;
 height: 3em;
}
.box1 {
 margin-bottom: -1.5em;
 height: 4em;
}
.box2 {
 border: 1px dashed black;
 border-width: 1px 0;
 margin-bottom: 2em;
}

Some definitions for container and divs so margins' effects can be seen more clearly

css

.container {
 background-color: orange;
 width: 320px;
 border: 1px solid black;
}
div {
 width: 320px;
 background-color: gold;
}

Result

[フレーム]

Specifications

Specification
CSS Box Model Module Level 3 # margin-physical

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Aug 5, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content