写项目的时候一直用到边距，今天用了一下午的时间好好研究了一下边距，发现CSS边距并非那么简单。这里就和大家分享一下：

一、内边距

   如下面代码

   html:

   <div class="test"><div>

   css:

    .test{

       width:100px;

       height:100px;

       background-color:#fbc;

       padding:10px 20px 30px 40px;

    }

这时候在这个div中会形成一个内容框它里顶部边框距离为10px，右边20px,下边30px,左边40px，这个内容框应该是100*100（横*竖）的框。他现在整个框应该为160*140。这个比较简单。

二、外边距

外边距就比较有趣了

   html:

   <div class="test">

     <div class="test1"></div>

     <div class="test2"></div>

  <div>

   css:

    .test{

       width:100px;

       height:100px;

       background-color:#fbc;

       margin-top:10px;

    }

   .test1{

      width:20px;

      height:20px;

      background-color:blue;

      margin-top:10px;

  }

   .test2{

      width:20px;

      height:20px;

      background-color:red;

      margin-top:20px;

  }

这个时候大家觉得会有什么样的状况，我和大家透露点这个时候div.test在他上边框上会产生一个10px的外边距；而div.test1上边框和div.test上边框重合，在它上边框也会产生一个10px的外边距，这个将于div.test上边距重合，同样的margin-bottom同样也是这个原理。margin-top和margin-bottom边距不会针对它父类div而产生边距，而是会和它父类或同等级的外边距进行重合，如果它们外边距都为正数，则取最大值，若有一个为负，则正负相加得到最后值。

这个大家可以去试试！

另外margin-left会针对他父类或他同级产生边距，将margin-left：10px,则这个元素里父类左边框距离为10px，而产生一个10px的边距，而margin-right就完全没有限制，只会影响同级元素，他可能会超过父类元素的宽度。同时，margin-left不存在上面重合的性质。