margin-bottom

CSS margin-bottom 属性用于指定元素的底部外边距的尺寸。

在HTML页面中，每一个元素都是一个规则的矩形。每一个元素都由一个盒模型来表示，盒模型由4个区域组成：content box（内容区域）、padding box（内边距区域）、border box（边框区域）和 margin box（外边距区域）。元素的内容都被放置在content box（内容区域）中，其它几个区域为可选区域，在你设置了 padding 、 margin 和 border 属性时会生成相应的区域。下图为CSS盒模型的示意图：

margin-bottom 属性用于指定元素底部边框之外的空间区域。如下图所示的蓝色区域：

margin-bottom 属性对于的内联元素不起作用。

margin-bottom 属性的值可以是负数，负 margin 值可以使元素之间的距离靠得更近。

margin-bottom: <length> | <percentage> | auto | inherit
                            

参数：

 .box {
    margin-bottom: 30px;
}

.box2 {
    margin-bottom: 15%;
}

.box3 {
    margin-bottom: inherit;
}