行距调节必须用CSS的line-height属性设在包含多行文本的块级容器（如p、div）上，不可用于span等内联元素；应使用无单位数值（如1.6），避免px或%导致继承失效；段落间距则需用margin控制，与line-height作用对象不同。
行距调节不是靠 HTML 标签或属性实现的，所有可控、可维护的行距调整都必须用 CSS 的 line-height —— 用错地方（比如改 margin 或堆 <p>）只会让结构混乱、响应式失效、读屏器误读。
line-height 该设在哪个元素上才生效
必须设在**包含多行文本的块级容器**上，比如 p、div、li、blockquote。对 span 或 a 这类内联元素单独设 line-height，不会改变所在行的整体高度，只影响其自身行框内的垂直对齐（常用于按钮居中），但不解决段落行距问题。
- ✅ 正确：给
p设line-height: 1.6，整段文字换行后行距统一 - ❌ 错误：给
span设line-height: 2，指望它“撑开”父段落——无效 - ⚠️ 注意：
h1–h6有浏览器默认line-height，若没显式重置，可能和正文不一致
用无单位数值（如 1.6）而不是 px/%
这是最容易踩坑的一点：line-height: 1.6 是相对当前元素 font-size 的倍数，子元素字体变大时，行高自动按比例放大；而 line-height: 24px 或 line-height: 160% 是固定值，子元素换字号后极易重叠或断层。
- 中文正文推荐
line-height: 1.5～1.8，标题可略低（1.2～1.4） -
line-height: 150%看似等价于1.5，但它继承的是计算后的绝对值，不随子元素字号重算 - 在
body上设line-height: 1.55，大多数文本元素会自然继承，减少重复声明
段落之间空隙 ≠ 行距，别混用 margin 和 line-height
line-height 控制的是**段内行与行之间的距离**；margin-top/margin-bottom 才控制**段与段之间的空白**。浏览器默认给 p 加了约 1em 上下外边距，想调段间距，就直接覆盖 margin，而不是靠拉高 line-height 去“假装”段距变大。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 统一段间距：用
p { margin: 0.8em 0; } - 首段去顶边距、末段去底边距：用
p:first-child { margin-top: 0; }和p:last-child { margin-bottom: 0; } - Flex 容器中可用
gap替代margin，但 IE 不支持，需降级处理
调试时怎么确认 line-height 生效了
行高本身不可见，靠肉眼难判断是否真起作用。最可靠的方式是：
- 给目标元素加临时
border: 1px solid red或background-color: rgba(0,0,0,0.1)，观察实际行框范围 - 打开浏览器开发者工具，选中元素，在 Styles 面板里看
line-height是否被正确计算并应用（注意是否被其他规则覆盖） - 检查是否有
overflow: hidden或非标准字体导致文字被截断——这时调大line-height可能反而暴露渲染问题
真正难的不是设一个数字，而是理解 line-height 作用的是“行框高度”，不是“两行基线距离”，且它和 font-size、vertical-align、容器 display 类型都有关联；稍一混淆，就会出现文字重叠、首行缩进消失、Flex 里失效等看似奇怪的问题。
