对于前端来说写页面是最基础的东西了,但是想不到还是有人不理解边距合并的问题,昨天有网友问我为什么设置的margin不是我设置的实际效果?
好吧,废话不多说,下面来说一下关于margin合并的问题。
解决margin合并的方法有好多种:
首先说一下嵌套关系的margin合并问题。
1.给父元素添加padding-top值和padding-bottom值
2.给父元素添加border值
3.给父元素添加属性overflow:hidden
4.给父元素或者子元素声明浮动float
5.给父元素添加属性: positon:relative,给子元素声明绝对定位position:absolute
6.给父元素或子元素声明绝对定位:position:absolute
![8118cd51f5a2a66661b18a9eae82d1b8.png](https://img-blog.csdnimg.cn/img_convert/8118cd51f5a2a66661b18a9eae82d1b8.png)
在这里的父级div是a01,嵌套着子级div a02,如果在没有设置a01的合并解决方式的时候就会发生margin合并。如图