子元素设置margin-top和margin-bottom无效，外边距折叠导致父元素移动

怎么了？

很多时候在写前端页面的时候会为元素设置margin-top和margin-botton值，有些时候会发现设置的margin值无效，反而父元素却因为margin值上下移动了

为什么？

因为两个元素发生了边距重叠。边距重叠是指两个或多个块元素(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。

解决办法

1.为外层元素或者内层元素设置边框（border:1px solid transparent）

2.为外层元素设置overflow:hidden属性

3.为外层元素设置padding值代替内层元素的margin值

4.内层元素或者外层元素浮动：float：left或者设置绝对定位display：absolute，或者改为行内块元素：display:inline-block

5.内层元素加一点点padding值（padding:1px）