上下元素margin重叠问题的解决办法(一种情况)

问题描述:

当两个元素纵向存在,上面的元素设有margin-bottom,下面的元素设有margin-top,有时候我们就会遇到一个奇怪的现象,那就是我们实际得到的两个元素之间的间距并非是上面两个值的和,而是其它值。

 

具体情况:

我们先编写如下HTML代码:

<divid="div1">

这是div1

</div>

<divid="div2">

<divid="div2-1">

这是div2-1

</div>

</div>

 

CSS代码:

* {

margin:0;

padding:0;

box-sizing:border-box;

}

#div1, #div2-1 {

width:100%;

height:100px;

border:none;

background-color:#ba68c8;

line-height:100px;

text-align:center;

color:white;

}

#div1 {

margin-bottom:50px;

}

#div2-1 {

margin-top:100px;

background-color:#64b5f6;

}

#div2 {

border:none;

}

 

效果如下:

 


 

分析:

理说,我们对div1设置了margin-bottom:50px;对div2-1设置了margin-top: 100px;那么,我们得到两个元素的中间间距应该是150px才对,但是实际效果如上图所示,两个元素之间的间距为100px。原因在于div1margin-bottom的参照元素是div2-1,而div2-1margin-top的参照元素恰好是div1,这就导致了它俩之间的间距就会以两值中最大的那个为实际效果。这个现象其实和我们生活中很多场景很像,仔细想想应该不难理解。

 

解决办法:给它们俩之间一个另外的参照,这里给div2加个边(黑色)

CSS代码:

#div2 {

border:1px solid;

}

 

改后的效果如下:


 

这样我们就得到了我们想要的效果。当然,这个问题还会有其它的变形情况,需要我们举一反三。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值