margin collapse 坍塌
CSS中存在一个margin collapse,即边界塌陷或者说边界重叠。
对于上下两个并列的对象而言:上面div的margin-bottom和下面div的margin-top会塌陷所以从这个意义上说:CSS及浏览器的设计者们希望我们在布局时,如果遇到上下两个并排内容块的安排,最好只设置其中每个块上或下margin的一处即可。即div的高和他包含的元素有关。
当margin-bottom和margin都为正数时,结果为两者之间的最大值
当margin-bottom和margin-top都为负时,结果为两者绝对值较大的那个值。
当margin-bottom和margin-top为一正一负时,结果为两者之和。
对于父子关系的对象而言:对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。
父元素无填充内容,且没有设置border时,子元素的margin-top不会起作用
解决父元素塌陷的方法有,(应该给父类元素添加BFC)
1、为父元素添加overflow:hidden;,
2、为父元素float非none属性,也可为子元素添加float非none属性
3、需要给父div设置:边框,当然可以设置边框为透明; border:1px solid transparent 或border-top:1px solid transparent
4、为父DIV添加padding,或者至少添加padding-top;
5,如果遇到上下两个并排内容块的安排,最好只设置其中每个块上或下margin的一处即可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步