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

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

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

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

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

(1)兄弟之间重叠

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

(2)父子之间重叠

  • 父元素加入:overflow: hidden
  • 父元素添加透明边框:border:1px solid transparent
  • 子元素变为行内盒子:display: inline-block
  • 子元素加入浮动属性或定位
相关推荐
小马哥编程4 分钟前
【软考架构】案例分析-web应用设计:SSH 和 SSM(Spring + Spring MVC + MyBatis ) 之间的区别,以及使用场景
前端·架构·ssh
用户103113311669 分钟前
Vuex学习记录
前端
前端开发爱好者11 分钟前
Electron 淘汰!新的跨端框架来了!性能飙升!
前端·javascript
狮子座的男孩16 分钟前
js基础:08、构造函数(共享方法)、原型(prototype)、原型对象、(修改原型)toString方法、垃圾回收
前端·javascript·经验分享·prototype·垃圾回收·构造函数·原型对象
前端开发爱好者20 分钟前
Vue 团队成员又搞了个 "新玩具"!
前端·javascript·vue.js
用户0136087566881 小时前
前端实现文件上传功能
前端
秦牛正威1 小时前
CSS的 white-space、word-break、overflow-wrap的用法
css
咖啡の猫1 小时前
Vue-github 用户搜索案例
前端·vue.js·github
yong99902 小时前
响应式布局新利器:CSS Grid 的 grid-template-areas 实战
前端·css
咖啡の猫2 小时前
Vue过度与动画
前端·javascript·vue.js