什么是margin重叠问题?如何解决?

问题描述: 两个块级元素的上外边距和下外边距可能会合并(折叠)为一个外边距,其大小会取其中外边距值大的那个,这种行为就是外边距折叠。需要注意的是,浮动的元素和绝对定位 这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向

计算原则: 折叠合并后外边距的计算原则如下:

  • 如果两者都是正数,那么就去最大者
  • 如果是一正一负,就会正值减去负值的绝对值
  • 两个都是负值时,用0减去两个中绝对值大的那个

解决办法: 对于折叠的情况,主要有两种:兄弟之间重叠父子之间重叠

(1)兄弟之间重叠

  • 底部元素变为行内盒子:display: inline-block
  • 底部元素设置浮动:float
  • 底部元素的position的值为absolute/fixed

(2)父子之间重叠

  • 父元素加入:overflow: hidden
  • 父元素添加透明边框:border:1px solid transparent
  • 子元素变为行内盒子:display: inline-block
  • 子元素加入浮动属性或定位
相关推荐
掘金安东尼8 分钟前
解读 hidden=until-found 属性
前端·javascript·面试
1024小神16 分钟前
jsPDF 不同屏幕尺寸 生成的pdf不一致,怎么解决
前端·javascript
滕本尊16 分钟前
构建可扩展的 DSL 驱动前端框架:从 CRUD 到领域模型的跃迁
前端·全栈
借月17 分钟前
高德地图绘制工具全解析:线路、矩形、圆形、多边形绘制与编辑指南 🗺️✏️
前端·vue.js
li理17 分钟前
NavPathStack 是鸿蒙 Navigation 路由的核心控制器
前端
二闹20 分钟前
一招帮你记住上次读到哪儿了?
前端
li理24 分钟前
核心概念:Navigation路由生命周期是什么
前端
古夕27 分钟前
my-first-ai-web_问题记录02:Next.js 15 动态路由参数处理
前端·javascript·react.js
梦里寻码27 分钟前
自行食用 uniapp 多端 手写签名组件
前端·uni-app
前端小白199529 分钟前
面试取经:工程化篇-webpack性能优化之热替换
前端·面试·前端工程化