margin-bottom
试一试
语法
css
/* <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: revert;
margin-bottom: revert-layer;
margin-bottom: unset;
margin-bottom
属性被指定为关键字 auto
,或 <length>
,或 <percentage>
。其值可以为正、零或负。
值
<length>
-
边距的大小,以固定值表示。
<percentage>
-
边距的大小,以百分比表示,相对于包含块的内联大小(在水平语言中为宽度,由
writing-mode
定义)。 auto
-
浏览器选择一个合适的值来使用。请参阅
margin
。
正式定义
正式语法
margin-bottom =
<length-percentage> |
auto
<length-percentage> =
<length> |
<percentage>
示例
设置正负底部边距
HTML
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 的 CSS,用于设置 margin-bottom 和高度
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;
}
一些用于容器和 div 的定义,以便更清楚地看到边距的效果
css
.container {
background-color: orange;
width: 320px;
border: 1px solid black;
}
div {
width: 320px;
background-color: gold;
}
结果
规范
规范 |
---|
CSS 盒子模型模块级别 3 # margin-physical |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
margin-top
、margin-right
和margin-left
以及margin
简写- 映射的逻辑属性:
margin-block-start
、margin-block-end
、margin-inline-start
和margin-inline-end
以及简写margin-block
和margin-inline