HTML文字排版核心是语义化标签的正确使用与关键CSS属性的单位选择：<p>、<h1>–<h6>、<strong>、<em>、<pre>、<code>决定结构逻辑；line-height宜用无单位值，letter-spacing优选em单位；writing-mode会翻转padding方向，需用简写并注意text-orientation兼容性。
直接上手写，别从“学排版”开始——HTML文字排版不是独立知识模块，而是 <p>、<h1> 到 <strong> 这些标签在真实内容里怎么用、为什么这么用的问题。
先搞清哪些标签真影响排版逻辑
很多初学者被“排版”二字带偏，去查一堆冷门属性，其实日常 90% 的文字结构靠这几个标签决定：
-
<p>是块级容器，自带上下 margin，不是“换行符”，别用它强行分段或对齐 -
<h1>–<h6>不是“加大字体”，而是语义层级，搜索引擎和读屏器靠它理解内容主次 -
<strong>和<em>替代<b>/<i>，不是为了样式，是为了让辅助技术知道“这里强调了” -
<pre>和<code>保留空格与换行，但默认等宽字体，混排时注意 line-height 是否失衡
line-height 和 letter-spacing 别乱设单位
这两个值看着简单，但单位选错会导致响应式失效或缩放异常：
-
line-height: 1.5（无单位）是首选，它基于当前font-size计算，缩放时自动适配 -
line-height: 24px在固定高度容器里可用，但字体变大时会撑破布局 -
letter-spacing: 0.05em比2px更安全，尤其在用户启用系统字体缩放时 - 避免
letter-spacing: normal显式重置——它不等于 0，不同浏览器默认值有微小差异
writing-mode 做竖排时，padding 方向会翻转
这是最容易踩的坑：一旦用了 writing-mode: vertical-rl，padding-top 实际变成“右边距”，padding-left 变成“下边距”。不注意这点，容器看起来像漏了一边。
立即学习“前端免费学习笔记（深入）”；
- 写竖排时统一用简写：
padding: 0 1em表示「上下为 0，左右各 1em」，此时“上下/左右”按新流向解释 -
line-height在竖排中控制的是字符列之间的垂直距离，数值含义不变，但视觉节奏完全不同 -
text-orientation: upright比mixed更可控，尤其当内容含 API 名、文件路径等英文片段时 - Firefox 64+ 才支持
sideways-rl，Safari 对嵌套vertical-lr的换行逻辑仍有偏差
真正卡住人的从来不是语法记不住，而是改完 line-height 后发现移动端字贴边、加了 writing-mode 后 padding 全反了、或者用 <h2> 当样式标签结果 SEO 掉权重。这些细节得在真实 HTML 片段里试三遍才能形成直觉。
