flex垂直堆叠时子元素间空隙主因是line-height撑开行盒：父容器继承过大line-height（如1.6）会使内联级内容参与行盒布局，导致视觉空白；需在flex容器上设line-height: 1并清理html空白节点。
Flex垂直堆叠时子元素间有空隙，先看line-height
Flex容器设为flex-direction: column后，子元素仍出现意外垂直间隙，大概率不是gap或margin导致的，而是父容器或子元素继承了过大的line-height。浏览器会把子元素（尤其是内联级、文本节点、span、img）当作行内内容参与行盒（line box）布局，而line-height会撑开整行高度，造成视觉上“多出一段空白”。
-
line-height值大于font-size时，上下留白会累加到相邻块级子元素之间，哪怕它们是div，只要父容器没清除行盒上下文，就可能被影响 - 常见于从全局样式（如
body { line-height: 1.6; }）继承下来的设置，子元素即使没文字，也会受其影响 - 用开发者工具检查子元素的
computed line-height，若显示为24px或更大，且父容器无font-size限制，基本可锁定问题
column方向下line-height怎么清？直接重置父容器
不要只给子元素设line-height: 1——它可能被其他样式覆盖，或对齐逻辑混乱；更可靠的做法是在Flex容器上切断行盒上下文：
- 给
flex-direction: column的父容器加line-height: 1，强制行高不撑开空间 - 同时确保
font-size不为0（否则文本不可见），但可以设为一个合理最小值，如font-size: 12px - 如果子元素含纯图标（如
svg或img），再加vertical-align: top防基线对齐带来的偏移 - 避免用
display: contents包裹子元素来“绕过”行盒——兼容性差，且在旧版 Safari 中会破坏可访问性
为什么gap有时也压不住这个空隙？
gap控制的是Flex项目之间的**布局间距**，而line-height引发的空隙属于**行盒渲染层**，发生在项目盒子生成之前。两者不在同一层级，所以即使你写了gap: 0，只要line-height还在撑高行盒，空隙就依然存在。
- 典型现象：
gap: 0生效（Computed中可见），但两个div之间仍有2–4px空白，打开Elements面板看，空白处实际是父容器的“行盒背景” - 验证方式：临时给父容器加
background: pink，再把line-height从1.5改成1，粉色区域高度会明显收缩 - 注意：若子元素本身设了
margin-bottom，它和line-height效应会叠加，需一并排查
别漏掉HTML里的文本节点
Flex容器里如果有换行、空格或注释，哪怕子元素是div，浏览器也会把它们解析成匿名文本节点，并参与行盒构建——这时候line-height就真正在起作用了。
- 删掉Flex容器内子元素之间的所有换行与空格：
<div></div> <div></div>连写 - 或用
font-size: 0配合line-height: 0在父容器上双杀（但子元素必须显式恢复font-size和line-height） - 不推荐用
white-space: nowrap——它只影响文本换行，对块级子元素无效，还可能截断内容
line-height共同触发的渲染行为。查line-height前，先确认父容器是否干净——没有多余换行、没有隐藏文本节点、没有未重置的全局行高。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
