（1）未加任何修饰的盒模型

1 
     

 

5    6  7  8 13 14 

 （2）在上列中加入border，即：

1 
     

 

5    6  7  8 13 14 

 可见，并没有使整体变大，而是让里面的内容变小了；

（3）给上列中加1个margin，即：

1 
     

 

5    6  7  8 13 14 

 可以看出，上列的大小不变，但位置进行了移动，且保持与其它元素一定的距离；

（4）给上列加1个padding，即：

1 
     

 

5    6  7  8 13 14 

 可以看出，上列两个字往内进行了收缩。

（5）上下margin叠加的问题

1 
      7  8 13 14 

从对比效果图可以看出，上下列的margin被抵消了1个10px；同时，若二者大小不同，以较大的margin值为准。

 当某个元素设置了float属性，那么它们将不再进行空白边叠加；如下：

1 
     

 

5    6  7  8 13 14 

 可以看出，这时二者中间的宽度为20px；

（6）左右浮动margin加倍问题

按照书上的写法会报错，以后再来验证吧！