什么是margin重叠问题?如何解决
margin重叠问题
个块级元素的上外边距和下外边距可能会合并(折叠)为一个外边距,其大小会取其中外边距值大的那个,这种行为就是外边距折叠。需要注意的是,浮动的元素和绝对定位这种脱离文
档流的元素的外边距不会折叠。重叠只会出现在垂直方向。只有块级元素会触发外边距塌陷的问题
计算原则
如果两者都是正数,那么就去最大者
如果是一正一负,就会正值减去负值的绝对值
两个都是负值时,用0减去两个中绝对值大的那个
解决方案
兄弟之间重叠
底部元素变为行内盒子:display: inline-block
底部元素设置浮动:float
底部元素的position的值为absolute/fixed
父子之间重叠
父元素加入:overflow: hidden
父元素添加透明边框:border:1px solid transparent
子元素变为行内盒子:display: inline-block
子元素加入浮动属性或定位
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理