DIV元素加 margin 会把父元素的 margin 也撑高

这种现象叫做外边距合并或CSS样式margin叠加的问题。
原理：相邻两个元素都有margin，那么间距会取两者较大的作为间距距离；
同理，对于包含的两个元素也一样，特殊的是如果包含的两个元素，父元素没有margin，而子元素有margin，并且父元素没有border和padding的话，那么子元素的margin会溢出到父元素外，要解决这个问题有很多方法，如设置1px的padding，或者设置透明的border等方法来防止margin溢出。

解决方案一：

给父节点添加一个border ( border:1px solid #fff; )，边框色和背景色保持一致，这样就能解决。但是此方案存在一个瑕疵：就是当父元素的 width 为 100% 时就会出现左右滚动的滚动条，造成页面布局发生改变。

解决方案二：

给父节点添加一个 padding ( padding:1px 0px; )，这样也能解决问题。此时就要适当修改一下父子节点的宽度和高度。