line-height 直接控制段落行高，决定基线间距，推荐使用无单位数值如1.6；误用margin/padding或font-size模拟行距会导致渲染异常；需注意继承、覆盖及移动端适配，WCAG建议正文行高≥1.5。
line-height 直接控制段落行高
行间距不是靠 <br> 或空 <p></p> 堆出来的，而是用 CSS 的 line-height 属性。它决定一行文字的基线到下一行基线的距离，数值越大，视觉行距越松。
新手常误以为改 margin 或 padding 能调行距——其实那只是段落之间的空白，不是段内行与行之间的距离。
-
line-height可以是无单位数字（推荐），比如1.6，表示字体大小的倍数，响应式友好 - 也可以是带单位的值，如
24px或1.5em，但固定像素在缩放或换字体时容易失衡 - 写在
<p>标签的 style 里最直观：<p style="line-height: 1.75;">... - 若全站统一，建议写进
<style>或外部 CSS 文件，避免重复内联
别用 font-size 模拟行距
有人把 font-size 设得很大、再用 vertical-align 或负 margin “挤”出空隙——这会导致文字渲染异常、选中错位、屏幕阅读器识别混乱。
真正要拉伸的是行高本身，不是靠字体撑开或遮挡实现的“假行距”。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 浏览器对
line-height的计算是标准且稳定的，font-size只管字号大小 - 当
line-height < font-size（如line-height: 0.8），文字会重叠，这是调试时容易触发的错误现象 - 移动端尤其要注意：iOS Safari 对小于
1.0的line-height渲染不一致，建议最小设为1.2
继承与重置：为什么有些段落没生效
如果写了 line-height 却没效果，大概率是父元素（比如 <div> 或 <body>）设置了更优先的样式，或者用了 !important 覆盖。
检查顺序很重要：内联 style > ID 选择器 > 类选择器 > 元素选择器；而 line-height 是可继承属性，子元素默认沿用父级值。
- 用浏览器开发者工具（F12）点中
<p>，看 computed 栏里的line-height实际值是多少 - 常见干扰源：
body { line-height: 1; }会压垮所有段落，需显式重写p { line-height: 1.6; } - Bootstrap 等框架默认设了
line-height: 1.5，直接覆盖即可，不用删框架 CSS
移动端适配和可访问性提醒
拉伸行距不只是为了美观，更是提升可读性和无障碍支持的关键。过密的行距会让视力障碍用户或 Dyslexia 用户难以追踪行尾到行首。
- WCAG 推荐正文行高至少为
1.5，标题可略低（1.2–1.4），但不要低于1.0 - 避免用
line-height: normal，它依赖字体度量，不同字体渲染差异大，不可控 - 如果用了自定义字体，记得在
@font-face中检查其line-gap是否过大，有时需要配合font-feature-settings: "liga"微调
真正难的不是写那行 line-height: 1.6，而是判断这个 1.6 在当前字体、字号、设备宽度下是否真的够用——得真去放大页面、横竖屏切换、用 VoiceOver 试读一遍。
