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

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

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

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

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

(1)兄弟之间重叠

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

(2)父子之间重叠

  • 父元素加入:overflow: hidden
  • 父元素添加透明边框:border:1px solid transparent
  • 子元素变为行内盒子:display: inline-block
  • 子元素加入浮动属性或定位
相关推荐
光影少年3 分钟前
css优化都有哪些优化方案
前端·css·rust
BillKu11 分钟前
npm 安装命令中关于 @ 的讲解,如:npm install @vue-office/docx vue-demi
前端·vue.js·npm
yangzhi_emo24 分钟前
ES6笔记4
前端·笔记·es6
萌萌哒草头将军30 分钟前
Node.js v24.8.0 新功能预览!🚀🚀🚀
前端·javascript·node.js
超人不会飛33 分钟前
大模型应用 Vue H5 模板:快速落地流式交互与富文本渲染的开箱方案
前端·vue.js·github
用户4582031531734 分钟前
CSS无需JavaScript的交互效果实现
前端·css
影i36 分钟前
在 Vue + Codemirror 中优雅回显 JSON
前端
奇怪的前端737 分钟前
Alien-Signals 响应式系统
前端·vue.js
你单排吧42 分钟前
Electron打包图标修改失败问题
前端
@AfeiyuO44 分钟前
vue3 实现将页面生成 pdf 导出(html2Canvas + jspdf)
前端·pdf·vue