margin边界重合问题及解决办法

当一个元素的顶边界与父元素的定边界重合（注意：只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。）

看如下代码：

HTML代码：

CSS代码：

我们预想的结果：

可实际结果：

边界重合带来的远远不止这些，当我们对P元素修饰margin垂直距离时，会导致父元素跟子元素一起进行margin操作。

解决办法：

       1.外层padding

       2.透明边框border:1px solid transparent;

       3.绝对定位postion:absolute:

       4.外层DIV overflow:hidden;

       5.内层DIV加float:left;display:inline;

       6.外层DIV有时会用到zoom:1;