CSS盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框和实际内容。如下图所示：

margin（外边距）：清除边框外的区域，外边距是透明的。

外边距常用属性： 

属性	描述
margin	设置所有外边距
margin-top	设置上边距
margin-right	设置右边距
margin-bottom	设置下边距
margin-left	设置左边距

padding（内边距）：清除内容周围的区域，内边距是透明的。

内边距常用属性：

属性	描述
padding	设置所有内边距
padding-top	设置上边距
padding-right	设置右边距
padding-bottom	设置下边距
padding-left	设置左边距

border(边框) 

常用的边框属性：

• border-width: 设置边框的宽度。
• border-color: 设置边框的颜色。
• border-style: 设置边框的样式。

border-style常用的属性值：

值	描述
none	定义无边框
hidden	与none相同，但用于表时，hidden用来解决边框冲突
dotted	定义点状边框
dashed	定义虚线边框
solid	定义实现边框
double	定义双线边框。双线的宽度与border-width的值相同