首页/新闻资讯/正文详情

三分钟带你回顾margin折叠问题

发布时间:2026/9/26 18:08:34 来源:云帆数科 栏目:资讯中心
三分钟带你回顾margin折叠问题
一、什么是 margin 折叠只有块级盒子才会出现这个现象 上下挨在一起的两个块盒子它们上下方向的外边距碰到一起不会叠加会合并成一个外边距只保留数值更大的那一个。两个关键点只在上下垂直方向生效margin-top/margin-bottom左右水平外边距margin-left/margin-right永远不会折叠二、三种会发生折叠的情况两个兄弟盒子上下挨着上面盒子的底部外边距和下面盒子的顶部外边距合并。父子嵌套盒子父盒子没有边框、内边距、BFC 隔离时子盒子的上下外边距会 “穿出去”和父盒子外边距合并。完全空的块盒子盒子里面没有文字、没有边框、没有内边距它自己的顶部和底部外边距会互相合并。三、5 种解决折叠的简单方法方法 1父盒子用内边距 padding子盒子取消外边距不用子元素 margin 撑开距离改用父元素 padding从根源避免折叠方法 2给父盒子加边框 / 一点点内边距边框能隔开父子的外边距透明边框不影响页面外观方法 3给子盒子加浮动或者绝对定位浮动、绝对定位的盒子脱离普通文档流不会出现 margin 折叠方法 4父盒子用 flex/grid 弹性布局只要父容器设为弹性布局里面子元素的外边距不会穿透父盒子方法 5父盒子开启 BFC最常用最简单写法父盒子设置overflow: hidden创建独立格式化区域锁住子元素 margin四、实操完整例子1. 原生状态出现 margin 折叠子盒子的上边距会穿透父盒子整个灰色父盒子一起往下移而不是子盒子在父内部下移2. 用 BFC 修复后折叠消失父盒子加overflow: hidden子盒子的外边距被限制在父盒子内部五、注意细节只有普通文档流的块级元素才会折叠行内元素、浮动、绝对定位盒子无折叠负数外边距也会折叠最后取两个负数里相对更大没那么负的值左右水平 margin 永远不会折叠不用考虑

相关推荐

终极指南:5分钟搞定RE引擎游戏Mod开发,开启你的游戏改造之旅
终极指南:5分钟搞定RE引擎游戏Mod开发,开启你的游戏改造之旅

终极指南:5分钟搞定RE引擎游戏Mod开发,开启你的游戏改造之旅 【免费下载链接】REFramework Mod loader, scripting platform, and VR support for all RE Engine games 项目地址: https://gitcode.com/GitHub_Trending/re/REFramework 还在为RE引… · 2026/9/26 18:08:21

HsMod终极指南:55+功能全面解析与高效炉石传说插件实战配置
HsMod终极指南:55+功能全面解析与高效炉石传说插件实战配置

HsMod终极指南:55功能全面解析与高效炉石传说插件实战配置 【免费下载链接】HsMod Hearthstone Modification Based on BepInEx 项目地址: https://gitcode.com/GitHub_Trending/hs/HsMod HsMod是一款基于BepInEx框架开发的炉石传说功能增强插件,… · 2026/9/25 12:51:15

实验周报五十
实验周报五十

文章目录摘要abstract一、实验二、比赛总结摘要 实验比赛微总结。 abstract A brief summary of the experiment and the competition. 一、实验 Smplpytorch实验代码:先实验文件的demo图像,弄清楚流程。 数据随机:demo.py。随机生成一组… · 2026/9/25 18:21:33

离谱!智能体基准测试空转也能得分?用 TaoToken 搭一套可复现的评测配置
离谱!智能体基准测试空转也能得分?用 TaoToken 搭一套可复现的评测配置

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 18:08:30

从Kubernetes到Agent编排:智能体调度、状态管理与记忆机制实战
从Kubernetes到Agent编排:智能体调度、状态管理与记忆机制实战

1. 从容器编排到智能体编排:一次思路的迁移1.1 为什么 Kubernetes 那套东西会被盯上做过几年后端或者运维的人,对 Kubernetes 的感情大概都是复杂的。一方面,它确实把“一堆机器当成一台机器用”这件事做到了极致;另一方面&#x… · 2026/9/26 18:08:30

SpringBoot日志文件配置全指南:从零到生产级
SpringBoot日志文件配置全指南:从零到生产级

搞Java后端的时间长了,你会发现一个规律:代码写得再漂亮,线上出了问题能救你的往往还是那些平时不起眼的日志文件。我印象最深的一次,凌晨三点被叫起来排查一个订单回调丢失的问题,服务一切正常,接口也返回… · 2026/9/26 18:08:24

AI Agent工程师如何保证交付结果:从模型调用到生产级系统的完整链路
AI Agent工程师如何保证交付结果:从模型调用到生产级系统的完整链路

做了两年多的 AI Agent 落地项目,我最大的感触是:调通一个模型接口,可能只需要半天;但把一个 Agent 真正交到用户手上,可能需要两个月。而且后者才是这份工作的本质。很多人一提到“AI Agent 工程师”,第一… · 2026/9/26 18:08:24

C语言分支与循环:if-else/switch与for/while完全指南
C语言分支与循环:if-else/switch与for/while完全指南

学C语言绕不过去的一个坎,就是分支与循环。分支让程序在岔路口自己选路,循环让程序把重复劳动交给机器,这两个东西一旦掌握,你写的代码才算真正有了逻辑,而不是从上到下平铺直叙。不管你是刚接触编程的大学生、自学C语… · 2026/9/26 18:08:24

AI Agent 热点简报(2026-04-08-2026-04-14):用 TaoToken 统一 Key 跑通 OpenClaw 与 Hermes Agent 配置
AI Agent 热点简报(2026-04-08-2026-04-14):用 TaoToken 统一 Key 跑通 OpenClaw 与 Hermes Agent 配置

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 18:08:24

数据库课后习题答案别硬背:当测试用例集刷,效率翻倍
数据库课后习题答案别硬背:当测试用例集刷,效率翻倍

简介:万常选版《数据库原理与设计》课后习题答案资源,覆盖第2至6章及第9章,适合正在学习关系模型、数据库建模、关系数据理论与模式求精的本科生、自学者作为复习与自测材料。压缩包共7个文件,含3个doc参考答案、2个sql示例脚本、… · 2026/9/26 0:00:21

OpenClaw 替代品?Hermes Agent 踩坑实录:macOS 飞书接入 TaoToken 配置
OpenClaw 替代品?Hermes Agent 踩坑实录:macOS 飞书接入 TaoToken 配置

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 0:00:40

向下兼容与向上兼容:接口设计中的兼容性策略与工程实践
向下兼容与向上兼容:接口设计中的兼容性策略与工程实践

一次版本升级事故,是很多团队绕不过去的坎。线上环境里,服务端明明已经上线了新版接口,老的移动端还在照着旧文档传参数。请求一到网关,校验直接拒绝,用户操作失败,客服群炸了锅,开发群里开始互… · 2026/9/26 0:00:46

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码