margin相关的CSS属性

margin表示外边距（相对于参考元素的距离）。

显然，一个二维的盒子有上下左右四个方向。所以，CSS里面提供5个相关属性：

属性说明
margin-top设置上边的外边距
margin-bottom设置下边的外边距
margin-left设置左边的外边距
margin-right设置右边的外边距
margin

可以一次性设置上下、左右属性，不过，上下属性值是一样大，左右属性值是一样大

使用格式是：margin : value1 value2

value1表示margin-top和margin-bottom

value2表示margin-left和margin-right

margin取值有如下四类：

  • length
    length是带单位的数字，比如50px。如果取值是0，可以省略单位。
  • percent
    percent是带%的数字，比如50%。如果取值是0，可以省略%。
  • auto
    如果取值是auto，表示看它的内容，内容有多大就多大。
  • inherit
    inherit是继承的意思。如果取值是inherit，表示看它与它的父容器用一样大。

在CSS里面，凡是与尺寸相关的属性，通常都会有这四类取值。

示例：

.panel-body > .btn {
    width         : auto;
    margin-top    : 20px;
    margin-bottom : 20px;
    margin-left   : 20px;
    margin-right  : 20px;
}

.panel-body > .btn {
    width  : auto;
    margin : 20px 20px;
}