line-height是CSS属性,必须通过style、class或外部样式表设置,不能作为HTML属性写在标签内;推荐使用无单位数字(如1.6)以实现响应式缩放,应设在包含文本的块级容器(如p、body)上,避免固定像素值导致适配失效。

line-height 不是 HTML 属性,不能写在标签里像 <p line-height="1.6"> 这样——浏览器直接忽略。所有行高控制必须靠 CSS。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
为什么用 line-height: 1.6 而不是 line-height: 24px
固定像素值会锁死行高,脱离字体大小变化:
- 当 font-size 缩到 12px,line-height: 24px 就显得松垮;
- 当 font-size 放大到 20px,同一 24px 行高可能压住字母 “g”“y” 的下降部;
- 用户开启系统字体放大或强制缩放时,px 值不响应,文字易重叠;
- 用 rem 或 clamp() 动态调字号时,px 行高完全失联。
而 line-height: 1.6 是乘数,始终按当前元素的 font-size 实时计算,安全、可预测。
line-height 设在哪一级元素上才有效
它必须设在**包含文本的块级容器**上,比如 p、div、body:
- 设在 span 或 a 上基本没视觉效果,因为 line-height 控制的是整行行框(line box)高度,不是单个内联元素自身;
- 设在 body 上能统一基准,但标题(h1–h3)通常需单独覆盖,避免头重脚轻;
- 若父容器是 display: flex,子元素 p 的 line-height 仍生效,但整体垂直对齐由 align-items 决定,不是靠它居中。
中文正文该设多少才不粘连也不割裂
纯中文排版有特殊视觉节奏,不能照搬英文经验:
- 小字号正文(font-size: 14px–16px)建议从 line-height: 1.75 起步,低于 1.5 易粘连,高于 2.0 段落断裂;
- 思源黑体、HarmonyOS Sans 等现代无衬线字体自带较大内置行距,1.6 可能已偏松,需打开开发者工具加 border: 1px solid red 观察真实行框;
- 标题可降到 1.3–1.4,但别用 1.0,否则基线对齐会让文字贴顶;
- 做多行省略(-webkit-line-clamp)时,max-height 必须严格等于 line-height × 行数,且单位一致(如都用 em),混用单位会导致截断错位。
真正容易被忽略的是:行高不是“上下留白”,而是行框高度;它不解决多行容器内的垂直居中,也不影响 margin 或 padding。调完之后,务必在不同字号、不同设备、不同字体下用开发者工具看真实行框,而不是只盯着预设数值。


















