Definition and Usage
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.
This property has no effect on non-replaced inline elements, like <tt> or <span>.
- Initial0
- Applies toall elements except elements with table display types other than table-caption, table and inline-table
- Inheritedno
- Percentagesrefer to the width of the containing block
- Mediavisual
- Computed Valuethe percentage as specified or the absolute length
- Animatableyes, as a length
- Canonical orderthe unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: <length> | <percentage> | auto
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 */
margin-bottom: auto;
margin-bottom: inherit;
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.
Examples
1 |
.content { margin-bottom : 5% ; } |
2 |
.sidebox { margin-bottom : 10px ; } |
3 |
.logo { margin-bottom : -5px ; } |
4 |
#header { margin-bottom : 1em ; } |
Compatibility
Desktop browsers
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) |
Mobile browsers
Feature |
Android |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
Basic support |
1.0 |
1.0 (1) |
6.0 |
6.0 |
1.0 |