CSS盒式模型

图为一个完整的盒对象，由众多属性构成，每个属性在实际盒对象显示中，占据不同的位置。

margin：margin边界线到border边界线之间的区域；

border：border边界线到padding边界线之间的区域；

padding：padding边界线到内容边界线之间的距离；

内容的宽和高由width和height来定义。

上图显示最终宽度并非我们所指定的width：400px；而是众多属性之和，总宽度=20px+10px+40px+200px+40px+10px+20px=340px。

这便是最终盒对象的显示尺寸，对于高度height值，也是同样的计算方法。

在实际实际时，会遇到两个盒对象并排或上下排列的情况。例如：两个盒对象左右排列时，当border为0，那他们之间的距离为左边盒子的padding-right加margin-right再加上右边盒子的padding-left加margin-left的和所组成。