writing-mode: vertical-rl 会使盒模型方向旋转90°，margin-top作用于左侧、margin-bottom作用于右侧，padding-top为顶部留白、padding-left为底部留白，line-height控制列内字符间距，letter-spacing影响竖排字符垂直疏密，text-orientation控制拉丁字符横/直排。
直接用 writing-mode + line-height + letter-spacing 就能完成基础竖排或精细横排布局，不需要 JS 或 hack 手段。关键不是“能不能做”，而是“哪几个属性在竖排下行为会反转”——这点不注意，样式会完全错位。
vertical-rl 下 margin 和 padding 方向全反了
设置 writing-mode: vertical-rl 后，传统水平方向的盒模型语义全部旋转 90°：
-
margin-top实际作用在元素**左侧**，margin-bottom作用在**右侧** -
padding-top变成**上边缘留白**（即最顶部字符上方），但padding-left会出现在**底部** - 如果容器有
border，border-top画在左边界，border-right画在上边界 - 调试时建议先加
outline: 1px solid red，比 border 更直观看出实际方位
line-height 在竖排里控制的是“字列间距”
横排时 line-height 控制行与行之间的垂直距离；竖排时它控制的是**同一列中上下字符之间的间距**（即“列高”）：
- 值用无单位数字（如
line-height: 1.8）最稳妥，避免固定像素在缩放时失准 - 中文竖排建议 ≥ 1.6，否则易重叠；若含英文/数字，可设到 2.0 再配合
text-orientation: upright - 不要依赖
height去“撑开”竖排容器——它控制的是容器宽度（因方向已转），真正影响高度的是line-height × 字数
letter-spacing 对竖排的影响常被低估
letter-spacing 在竖排下仍作用于字符间水平距离，但因文字已旋转，这个“水平”其实是**垂直方向上的字符左右偏移**：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 正值会让字符在列中“上下松散”，负值则挤压——视觉上像调整了字距，实则是沿列轴微调位置
- 混排场景（如「第2025章」）中，
letter-spacing会影响数字横向块的整体宽度，可能破坏对齐 - 若需紧凑数字，优先用
text-combine-upright: all把「2025」压成一个字形单位，再统一调letter-spacing - 注意继承：子元素若未重置，会继续应用父级的
letter-spacing，导致嵌套文本错位
text-orientation 决定拉丁字符是否“躺平”
默认 text-orientation: mixed 让英文字母、数字保持横排（每个字符单独旋转），而 upright 强制它们直立显示：
-
mixed更符合阅读习惯，但会导致「HTML」变成 H
T
M
L 字符纵向堆叠，占空间大 -
upright节省垂直空间，但小写字母（如 a、g）直立后识别度下降，慎用于正文 - 仅对
writing-mode: vertical-*生效；横排下该属性被忽略 - 部分旧版 Safari 需加
-webkit-text-orientation: upright兼容
真正难的不是写对那几行 CSS，而是理解方向切换后所有盒模型、间距、继承规则都已重映射——你写的 margin-top 已经不是你心里想的那个“顶边”。动手前，先在 DevTools 里把 outline 和 background 打开，看清楚方向再调值。
