有没有过这种情况？写个div套div, 子 element 加了 margin-top, 结果爹 element 没跟着"长高", 反而儿子顶到外面去了? 害我当初踩这个坑的时候, 差点摔碎键盘——明明视觉上儿子在爹肚子里, 怎么 margin 就跟"漏网之鱼"似的, 直接把爹往外推?

先kan段Zui普通不过的代码:

配点样式: .parent { width:200px;background:gold; } .child { width:100px;height:100px;background:deepskyblue;margin-top:50px; }

你猜结果怎么样? 直觉上应该是儿子在爹内部往下挪50px, 爹整体变高150px对吧? 但实际呢? 儿子直接"贴"在爹顶部, 爹没长高! 反而是整个爹带着儿子往下掉了50px, 跟被儿子踹了一脚似的.

这不是你 CSS 写错了, 是 CSS 本身就这么"反直觉"——垂直方向的外边距会折叠, 父子之间尤其明显.

说白了就是 CSS 的 "外边距折叠"机制在搞鬼.

官方定义有点绕, 我翻译成人话: 两个相邻块级盒子的垂直 margin, Ru果中间没隔着东西, 就会合并成一个大 margin, 而且这个大 margin 算在外面, 不是里面.

具体到父子关系里, 三个条件缺一不可: 1. 爹 element 没有 padding 和 border ; 2. 爹肚子里没有内联内容; 3. son element 的 margin 和爹 element 的 margin 在垂直方向"贴在一起".

举刚才例子: son 的 margin-top=50px, dad 的 margin-top默认是0.俩 margin一贴脸,"啪"就合并成50px——但这个合并后的 margin不算dad 的高度里!而是直接作用在dad外面!相当于son拿自己的margin把dad往下推了50px,dad自己纹丝不动.

Ru果 son 设置 margin-bottom=50px呢?同理,dad只要底部没 padding/border,son 的下 margin也会"钻"出去,dad还是不长高.是不是觉得hen坑爹?但这真不是 bug——W3C规范就是这么定 的,目的是避免文字段落之间出现多余空白,只不过放到现在 div套div场景里就变"反直觉"了.

知道原因就好办了——核心思路就是阻断 son 和 dad 的 margin "接触".以下方法按 "傻白甜到高级玩家"排序,包你够用.

Zui简单粗暴の办法!相当于在 son 和 dad之间放个"隔离板".

比如 dad加 padding-top:50px;或者 border-top:1px solid transparent;——只要隔开就行!

优点:代码短到爆炸,whodouNeng秒懂;缺点嘛…Ru果dad有固定高度/宽度,padding会把内部内容挤变形!这时候记得给dad加上 box-sizing:border-box; ,不然分分钟崩布局.

对了你知道吗?之前有人问我「为什么百度不收录」他新Zuoの网站吗?我跟他说啊—核心原因要么内容太水要么结构错咧要么服务器卡慢!想让百度快收你呀?先写原创内容+搞好站内链接+提交站长平台!保证比啥外链dou管用!

听不懂 BFC没关系,先记结论:BFC内部の margin不会和外部折叠.

怎么创建 BFC呢?几种常用姿势 : - dad加 overflow:auto; ; - dad加 display:flow-root;

举例子:.parent{display:flow-root;}——一行代码搞定!sonの margin再也不敢"穿透"dad啦~原理就是让dad变成一个独立の小世界,内部规则不和外界混.

现在谁还不用 Flex/Grid啊?!这俩布局简直是 margin折叠の天敌.

只要把 dad设成 Flex或 Grid容器就行:.parent{display:flex;flex-direction column;}或者 .parent{display grid;}.瞬间 sonの margin-top就会乖乖撑开dadの高度!完美符合直觉有没有?!

注意哦—Flex默认 direction是 row,所以得加 flex-direction column才Neng让上下margin生效~但就算不加,Flex容器の块轴也不会和外部折叠哒!放心冲~

有没有那种不想改布局结构又想解决问题の情况?比如说dadYi经定好高度瞭,padding会影响其他样式?那试试给dad加 padding-top:.1px;.超小の内边距就Neng阻断折叠!,而且几乎kan不到视觉差异~缺点嘛…就是有点 hack ,但应急绝对好用!.

只有垂直方向の margin才会折叠,水平方向永远不会!放心给son左右加margin,dad只会变宽不会出幺蛾子;

不管多少个 son叠在一起,只要相邻 vertical margindou会合并—比如两个sondou有margin-top=30px,dad没 padding,boss级别的大margin就是30 px,不是60 px哦;

别跟我说 inline-blockNeng解决,inline-block虽然不会触发折叠但它自身有 baseline对齐问题…除非你真想让文字蛋疼地往下挪一点~

害说了这么多其实核心就一句话:Cssの外边距折叠不是 bug是特性!.理解它了你就Neng少骂两句 "该死의 Css",多写几行顺畅な代码~下次再遇到 dad包不住 son;margin时别慌—翻出今天こ篇文章对应找方法就行咯!.对咧再补个小彩蛋—Ru果 son设置 position:absolute;,那它お勺所有 marindou会脱离普通流,dad根本kan不见它;margin自然也不会影响dad高度~是不是又长知识瞭?.