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

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

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

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

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

(1)兄弟之间重叠

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

(2)父子之间重叠

  • 父元素加入:overflow: hidden
  • 父元素添加透明边框:border:1px solid transparent
  • 子元素变为行内盒子:display: inline-block
  • 子元素加入浮动属性或定位
相关推荐
fruge6 分钟前
前端性能优化实战:首屏加载从 3s 优化到 800ms
前端·性能优化
zlpzlpzyd16 分钟前
vue.js 2和vue.js 3的生命周期与对应的钩子函数区别
前端·javascript·vue.js
鸡吃丸子33 分钟前
前端需要掌握的关于代理的相关知识
前端
爱敲代码的小冰37 分钟前
js 时间的转换
开发语言·前端·javascript
汝生淮南吾在北42 分钟前
SpringBoot+Vue游戏攻略网站
前端·vue.js·spring boot·后端·游戏·毕业设计·毕设
AAA阿giao43 分钟前
深入理解 JavaScript 中的面向对象编程(OOP):从构造函数到原型继承
开发语言·前端·javascript·原型·继承·原型模式·原型链
cos1 小时前
React RCE 漏洞影响自建 Umami 服务 —— 记 CVE-2025-55182
前端·安全·react.js
ConardLi1 小时前
分析了 100 万亿 Token 后,得出的几个关于 AI 的真相
前端·人工智能·后端
阿珊和她的猫1 小时前
UTF - 8 编码在 HTML 中的重要性
前端·html
加油乐1 小时前
css及js实现正反面翻转
前端·javascript·css