margin问题

来源：互联网发布：淘宝账号下线编辑：程序博客网时间：2024/06/10 04:23

1、margin塌陷问题就是上下两个相邻的元素之间在都设置了margin值得时候，两个元素之间的距离就只空出一个margin值，如图所示，给元素设置都设置了上下margin为20px，但是如果上下都20px，那么两个元素之间的距离应该有40px像素才对。

上图中通过对比，少了20px像素，我们可以通过脱离标准文档流来解决这个问题，如：定位或浮动。

不仅仅上下的margin会重叠，还有父子元素的margin也会有问题的，当你给子元素在设置距离父元素为20px的时候，margin会变成在父元素上

图中设置绿色距离黑色的盒子20px，但是却变成了黑色盒子的20px，我们可以给黑色盒子设置border或padding来解决这个问题

阅读全文

'); })();