Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

margin-bottom

这篇文章需要技术复核。如何帮忙。

这篇翻译不完整。请帮忙从英语翻译这篇文章

Summary

The effect of the CSS margin-bottom property on the element box

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.
是否是继承属性
Percentagesrefer to the width of the containing block
适用媒体visual
计算值the percentage as specified or the absolute length
是否适用于 CSS 动画yes, as 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 初始定义

浏览器兼容性

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

文档标签和贡献者

标签: 
 此页面的贡献者: Simplexible, Sebastianz, Prinz_Rana, JohnCido
 最后编辑者: Simplexible,