Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

最详细的div边距合并的问题和解决方法

归隐情缘 2019-02-20 11:51:00 阅读数:247 评论数:0 点赞数:0 收藏数:0

对于前端来说写页面是最基础的东西了,但是想不到还是有人不理解边距合并的问题,昨天有网友问我为什么设置的margin不是我设置的实际效果?

好吧,废话不多说,下面来说一下关于margin合并的问题。

解决margin合并的方法有好多种:

首先说一下嵌套关系的margin合并问题。

1.给父元素添加padding-top值和padding-bottom

2.给父元素添加border

3.给父元素添加属性overflow:hidden

4.给父元素或者子元素声明浮动float

5.给父元素添加属性: positon:relative,给子元素声明绝对定位position:absolute

6.给父元素或子元素声明绝对定位:position:absolute

在这里的父级div是a01,嵌套着子级div a02,在没有设置以上属性时候就会发生margin合并。如图

在上面的图中,父级div的margin-top:10px;因为边距合并问题变成了50px,而子级的div因为边距合并问题margin:50px auto;

则变成了margin:0 auto;

需要注意的是边距合并不仅仅是上边距,下边距也一样会被合并。即(margin-top和margin-bottom)

 要解决这个问题,可以这样做(overflow:hidden)

可以说这个是最方便简单的了,一行代码搞定。

效果图:

还可以这样写:(padding-top和padding-bottom)

利用padding来设置效果也是一样的,开发是时候也是比较常用的,因为如果想让上或下某一边有边距合并,这样设置就可以控制了。

虽然overflow:hidden很方便,但是不要固定死一个方法,这两个方法是在实际开发解决用得比较多的。

当然还可以这样:(border)

效果图:

还可以这样:(给父元素float)

 

效果图:

 还可以这样:(给子级元素float)

效果图:

还可以这样:(给父元素添加position)

效果图:

还可以这样:(给子元素添加position)

效果图:

还可以这样:(给父元素添加属性: positon:relative,给子元素声明绝对定位position:absolute

效果图:

接下来是:

没有嵌套关系的margin合并问题

当两个元素没有嵌套关系的时候(即兄弟关系),不管是否有border或者overflow属性时,两者始终会存在外边距合并问题。

在使用的时候记得取的是最大值。

效果图:

好了,到这里应该你也了解了边距合并问题和怎么去解决它了,如果有什么地方表达得不够清楚的,欢迎留言,我一定第一时间改进。

版权声明
本文为[归隐情缘]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/hermit-gyqy/p/10405715.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领