当前位置: 首页 > news >正文

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

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

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

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

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

 (1)兄弟之间重叠

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

(2)父子之间重叠

  • 父元素加入:overflow: hidden
  • 父元素添加透明边框:border:1px solid transparent
  • 子元素变为行内盒子:display: inline-block
  • 子元素加入浮动属性或定位

相关文章:

  • 09 Qt扩展LineEdit组件:Input输入框
  • icon格式软解码
  • 使用Homebrew搭建java环境
  • 基于PyTorch深度学习实战入门系列-(2)Numpy基础上
  • 定时执行专家V7.1 多国语言版本日文版发布 - タスク自動実行ツールV7.1 日本語版リリース
  • 通过iframe下载文件,怎么判断文件是否下载成功?
  • Linux minfo命令教程:详解MS-DOS文件系统参数查看命令(附实例详解和注意事项)
  • 阿里云k8s环境下,因slb限额导致的发布事故
  • 云服务器操作系统如果不小心被删除了文件,那岂不是不能进系统了?
  • Spring Boot启动流程详解
  • Java后端 - 一面凉经 - 得物(国际电商)
  • 安装sqlserver2022最新版只能使用.\SQLEXPRESS登录数据库怎么修改成.
  • Java实战:Spring Boot整合Canal与RabbitMQ实时监听数据库变更并高效处理
  • 2023年第三届中国高校大数据挑战赛(第二场)A题思路
  • EVE-NG桥接虚拟网卡实现与虚拟机通讯
  • (十五)java多线程之并发集合ArrayBlockingQueue
  • [译]Python中的类属性与实例属性的区别
  • 「译」Node.js Streams 基础
  • Java小白进阶笔记(3)-初级面向对象
  • JS数组方法汇总
  • Mysql数据库的条件查询语句
  • PermissionScope Swift4 兼容问题
  • python 学习笔记 - Queue Pipes,进程间通讯
  • Quartz实现数据同步 | 从0开始构建SpringCloud微服务(3)
  • React-Native - 收藏集 - 掘金
  • vue的全局变量和全局拦截请求器
  • Webpack入门之遇到的那些坑,系列示例Demo
  • XML已死 ?
  • 聊聊spring cloud的LoadBalancerAutoConfiguration
  • 如何抓住下一波零售风口?看RPA玩转零售自动化
  • 什么软件可以剪辑音乐?
  • 吴恩达Deep Learning课程练习题参考答案——R语言版
  • 想晋级高级工程师只知道表面是不够的!Git内部原理介绍
  • 一起参Ember.js讨论、问答社区。
  • 分布式关系型数据库服务 DRDS 支持显示的 Prepare 及逻辑库锁功能等多项能力 ...
  • ​​​​​​​​​​​​​​Γ函数
  • ​iOS安全加固方法及实现
  • #预处理和函数的对比以及条件编译
  • $.type 怎么精确判断对象类型的 --(源码学习2)
  • (1)Map集合 (2)异常机制 (3)File类 (4)I/O流
  • (Redis使用系列) SpringBoot 中对应2.0.x版本的Redis配置 一
  • (二) Windows 下 Sublime Text 3 安装离线插件 Anaconda
  • (二)linux使用docker容器运行mysql
  • (分享)一个图片添加水印的小demo的页面,可自定义样式
  • (附源码)apringboot计算机专业大学生就业指南 毕业设计061355
  • (附源码)ssm航空客运订票系统 毕业设计 141612
  • (附源码)计算机毕业设计ssm电影分享网站
  • (九十四)函数和二维数组
  • (十六)一篇文章学会Java的常用API
  • (四)搭建容器云管理平台笔记—安装ETCD(不使用证书)
  • (淘宝无限适配)手机端rem布局详解(转载非原创)
  • (一)Mocha源码阅读: 项目结构及命令行启动
  • (原創) 如何使用ISO C++讀寫BMP圖檔? (C/C++) (Image Processing)
  • .mat 文件的加载与创建 矩阵变图像? ∈ Matlab 使用笔记
  • .NET “底层”异步编程模式——异步编程模型(Asynchronous Programming Model,APM)...