css盒子与margin注意事项

一个盒子的主要有4个属性外边距（margin）,边框（border）,内边距（padding），本身内容大小构成

内容本身大小即字面意思，比如一张图片为120px*99px，则内容大小即为120px*99px

1.内边距，即内容本身与盒子边框的距离（不可为负值）

  padding:5px; 即上下左右内边距都为5px.

  padding: 5px 10px;  即上下内边距为5px，左右内边距为10px;

  padding: 5px 10px 15px;  即上内边距为5px，左右内边距为10px，下内边距为15px;

  padding: 5px 10px 15px 20px;  即上5px,右10px,下15px,左20px;(分别对应padding-top,padding-right,padding-bottom,padding-left)

   备注：margin与padding语法一样，只是含义不同且margin可以为负值，注意事项也比padding多

2.边框即盒子的厚度，一般可直接border:1px solid red;(这3个值分别对应border-size,border-style,border-color)

3.外边距margin(这里内容较多)

  (1).margin合并（前提两两之间无内边距与边框）

        a. 两个或多个垂直的盒子，上一个盒子的margin-bottom会与下一个盒子的mrgin-top合并且选取两者的最大值作为最终值；

        b.大盒子里装了许多小盒子，大盒子的margin-top会与第一个小盒子的margin-top合并，margin-bottom会与最后一个小盒子               的margin-bottom合并，并且两个小盒子也会发生上面a的这种合并，并且都是选择两者的最大值；

        c.盒子里面内容为空，它本身的margin-top与margin-bottom也会发生合并，并选取最大值，若相邻还有盒子，则还会继续发             生a这种情况

      解决办法：少用magin多用padding,实在不行用边框border(边框颜色设为背景色也看不出来)，当然会这个overflow:hidden;也                          行；

（2).语法方面与padding一样

     含义：盒子边框与盒子边框之间的间距