底部边距 | margin-bottom
CSS的?margin-bottom 属性用于设置元素的底部外边距，允许设置负数值。一个正数值将让它相对于正常流与邻近块更远，而负数值将使得更近。
/* <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 */
/* Keyword values */
margin-bottom: auto;
/* Global values */
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;初始值 | 0 |
|---|---|
适用元素 | all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter. |
是否是继承属性 | no |
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 |
语法
该margin-bottom属性被指定为关键字auto，或<length>或<percentage>。它的值可以是正值，零值或负值。
值
<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
CSS的div来设置margin-bottom和height
.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;
}容器和隔板的一些定义边缘的影响可以更清楚地看到
.container {
??? background-color:orange;
??? width:320px;
??? border:1px solid black;
}
div {
??? width:320px;
??? background-color:gold;
}规范
Specification | Status | Comment |
|---|---|---|
CSS Basic Box ModelThe definition of 'margin-bottom' in that specification. | Working Draft | No significant change |
CSS TransitionsThe 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 1The definition of 'margin-bottom' in that specification. | Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.0 (85) |
auto value | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 6.0 (strict mode) | 3.5 | 1.0 (85) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1) | 6.0 | 6.0 | 1.0 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
