CSS - margin-bottom

The effect of the CSS margin-bottom property on the element box The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.

Example

HTML

Copy Code

<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

Copy Code

.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

Copy Code

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

Syntax

CSS

Copy Code

/* <length> values */
margin-bottom: 10px;        /* An absolute length */
margin-bottom: 1em;         /* A length relative to the text size */
margin-bottom: 5%;          /* A margin relative to the nearest block container's width */

/* Keyword values */
margin-bottom: auto;

/* Global values */
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;

Values

<length>: Specifies a fixed width. See <length> for possible values.
<percentage>: A <percentage> always relative to the width of the containing block.
auto: See margin.

Formal syntax

CSS

Copy Code

<a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> auto

Description

This property has no effect on non-replaced inline elements, like <tt> or <span>.

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
Media	visual
Computed value	the percentage as specified or the absolute length
Animatable	yes, as a length
Canonical order	the unique non-ambiguous order defined by the formal grammar

Specifications

Specification	Status	Comment
CSS Basic Box Model The definition of 'margin-bottom' in that specification.	Working Draft	No significant change
CSS Transitions The definition of 'margin-bottom' in that specification.	Working Draft	Defines `margin-bottom` as animatable.
CSS Level 2 (Revision 1) The definition of 'margin-bottom' in that specification.	Recommendation	Removes its effect on inline elements.
CSS Level 1 The definition of 'margin-bottom' in that specification.	Recommendation	Initial definition

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.0 (1.7 or earlier)	3.0	3.5	1.0 (85)
`auto` value	1.0	1.0 (1.7 or earlier)	6.0 (strict mode)	3.5	1.0 (85)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	1.0 (1)	6.0	6.0	1.0

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/margin-bottom

CSS CSS Property Reference