margin padding 标准盒子模型

1.盒子模型（Box Model）组成

（1）盒子模型是样式表（css）控制页面的很重要的概念。所有的页面的元素都可以看成是一个盒子，占据一定的页面空间。占据的空间要比实际使用的空间要大得多。我们可以调整盒子的边框和距离，来调整盒子（页面和页面中的元素）的位置。盒子模型是由内容、边框、间隙（padding）、间隔（margin）组成。

（2）CSS盒子模型：封装HTML元素的盒子，它包括边框、外边框、内边距和实际内容。

• margin：外边距
• border：边框
• content：内容
• padding：内边距

2. 内边距（padding） 
padding属性用于设置内边距，即边框与内容之间的距离。

值的个数                                                  表达意思
padding:5px                               1个值，代表上下左右都是5px
padding:5px 10px;                     2个值，代表上下是5px，左右10px
padding:5px 10px 20px             3个值，代表上是5px，左右是10px，下是20px
padding:5px 10px 20px 30px    4个值，代表上是5px，右是10px，下是20px,左是30px（从上开始，顺时针）
 如果盒子本身没有设置width/height属性，则此时padding不会撑开盒子大小
 

3. 外边距（margin）
margin属性用于设置外边距，即盒子和盒子之间的距离。

margin的简写方式与padding完全一致。

（1） 外边距典型应用:

外边距可以让块级盒子水平居中，但必须满足两个条件：

盒子必须指定宽度（width）

盒子左右的外边距都设置为auto

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中需给其父元素添加text-align:center 。

（2） 外边距合并：

使用margin定义块元素的垂直外边距时，可能会出现1外边距的合并。