盒子模型


      ***********************  border  ***********************

      *      padding                                         *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *       

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXX     content    XXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *     

      *                                                      *

      ********************************************************


                             margin


      ***********************  border  ***********************

      *           padding                                    *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *       

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXX     content    XXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *

      *   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   *     

      *                                                      *

      ********************************************************

盒子所在的实际宽度为：左右margin + 左右border + 左右padding + content

=============================================================================

padding 属性  (margin同)

（1）padding:a b c d;   //上 右 下 左

（2）padding：x;        //上=右=下=左

（3）padding:a b;       //上=下  左=右

        （4）padding:a b c;     //上 右=左 下

**************按 上-->右-->下-->左 的顺序，没有赋值的等于其对面的值

====================================================================

由于各个浏览器存在着内外边距的默认值，且均不同，需要将所有浏览器默认的内外边距


都从零开始计算。

class,id,body{

padding:0;

margin:0;

}