margin塌陷解决办法

前言

我们在进行web页面设计的时候，经常会遇到margin塌陷的问题。如果页面的布局出现了margin塌陷现象，就会导致页面的展示效果出现异常，从而影响用户体验。那么，如何解决margin塌陷问题呢？

首先，让我们来了解一下什么是margin塌陷。当一个元素中存在另一个元素，而这两个元素之间又存在margin时，就会发生margin塌陷现象。具体来说，就是当父元素的margin和子元素的margin相遇时，会导致margin塌陷。这时候，父元素的高度会变得非常小，从而影响页面的展示效果。

解决办法：

1.给父盒子设置border，添加border后父盒子和子盒子就不会贴在一起了

2.给父盒子添加overflow：hidden 让他溢出隐藏

3.给父盒子设定padding值

4.给父盒子添加position：fixed

5.给父元素设置display: inline-block;