混排时行高塌陷、基线错位、中英文间距不均是核心问题；需设合理line-height（中文1.5、标题1.2）、清除默认margin、慎用语义化标签、优先rem单位、优化font-family栈并避免text-rendering: optimizeLegibility。
直接用 <h1> 到 <h6> 或 <span> + font-size 就能实现，但混排时行高塌陷、基线错位、中英文间距不均才是真问题。
为什么 <h1> 和 <p> 混在一起会挤成一团
浏览器默认给 <h1>~<h6> 设了固定 margin 和偏小的 line-height，而中文字符视觉重心低，若没显式调大行高，相邻不同层级标签的文字就会上下贴住——尤其当 <h3> 后紧跟 <p> 时最明显。
- 别依赖默认
line-height：中文段落建议设line-height: 1.5，标题可设line-height: 1.2（避免过大留白） - 清除默认外边距：用
h3, p { margin: 0; }或重置后手动加margin-bottom - 慎用
<h#>仅为了变大文字：语义错乱会影响 SEO 和屏幕阅读器，纯样式需求优先用<span>
font-size 单位选 em 还是 rem？
两者都比 px 更适合混排场景，但行为不同：
-
em相对父元素字体大小：嵌套深时易放大失控，比如<span style="font-size: 1.2em">在<h2>（本身是1.5rem）里，最终字号 =1.5rem × 1.2 -
rem相对根元素（<html>）：更可控，推荐作为基准单位。例如设html { font-size: 16px; }，则font-size: 1.25rem=20px - 中英文混排时，
rem能保持比例一致；若需响应式缩放，可在媒体查询里改html的font-size，所有rem值自动适配
中英文混排时文字“踩脚”或“悬空”
本质是字体度量（ascent/descent）不一致导致基线（baseline）错位，尤其当 <span> 包裹英文单词嵌在中文段落里时，字母常显得下沉或上浮。
立即学习“前端免费学习笔记（深入）”；
- 统一设置
vertical-align: middle或text-bottom可临时缓解，但治标不治本 - 真正解法是控制字体栈：确保中英文字体 fallback 合理，例如
font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif—— 中文字体在前，英文字体紧随其后，避免英文被强制塞进中文字体里渲染 - 禁用
text-rendering: optimizeLegibility：该属性在某些字体下会加剧基线偏移，尤其 macOS Safari
用 <small> 或 <sub> 做小号文字要小心
这些语义化标签自带样式和行为，不是单纯变小字号：
-
<small>默认font-size: 80%，且继承父级line-height，容易让行高压缩变形 -
<sub>和<sup>会强制改变vertical-align并缩小字号，用于数学/化学式没问题，但做注释文字时会导致上下错位 - 纯样式需求，直接用
<span style="font-size: 0.8rem">更干净，也方便统一 CSS 控制
混排最难的不是把字变大变小，而是让不同字号、不同语言、不同字体的文本在垂直方向上呼吸均匀——这得靠 line-height、font-family 栈、vertical-align 三者配合，缺一不可。任意一项调错，都会在某个浏览器或某段用户输入内容里突然崩掉。
