margin-bottom - CSS（层叠样式表） 编辑

Summary

CSS的 margin-bottom 属性用于设置元素的底部外边距，允许设置负数值。一个正数值将让它相对于正常流与邻近块更远，而负数值将使得更近。

该属性对于不可替代(non-replaced 元素在规范中有概念，请自行搜索)的行级元素没有效果，比如： <tt> 或者 <span>.

初始值	0
适用元素	all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
是否是继承属性	否
Percentages	refer to the width of the containing block
适用媒体	visual
计算值	the percentage as specified or the absolute length
Animation type	a length
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

/* <length> values */
margin-bottom: 10px;        /* 一个绝对的长度值 */
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;

值

<length>

定义了一个确定的宽度值，参见 <length> 以了解更多可能的值。

<percentage>

<percentage> 始终与包含该元素的容器宽度有关。

auto

由浏览器自己选择一个合适的值。参见 margin。

正式语法

<length> | <percentage> | auto

样例

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

用于设置div的margin-bottom和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;
}

为了使margin产生的影响更明显，添加了一些container和div 的样式定义

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

规范

规范	状态	注释
CSS Basic Box Model margin-bottom	Working Draft	无明显变化
CSS Transitions margin-bottom	Working Draft	将 margin-bottom 定义为可动画化
CSS Level 2 (Revision 1) margin-bottom	Recommendation	移除了对内联元素的影响
CSS Level 1 margin-bottom	Recommendation	初始定义

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• 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