中文竖排必须用 writing-mode: vertical-rl，字符从上到下、行从右向左排列；vertical-lr 适用于蒙古文等，中文使用会导致阅读顺序错乱；需确保块级元素结构，并用 text-orientation: upright 处理英文数字直立显示。
直接用 writing-mode 控制文字流向，配合 line-height 和方向适配的 margin/padding，是实现竖排、横排、多列等排版调整最可靠的方式。其他靠 transform 旋转或手动拆字的方法，会破坏文本可选性、语义结构和屏幕阅读器支持，不建议在生产环境使用。
vertical-rl 和 vertical-lr 的实际区别与选型
中文传统竖排必须用 writing-mode: vertical-rl：字符从上到下排列，行从右向左推进（即第一列在右，第二列在左），符合古籍、书法、出版物逻辑。而 vertical-lr 是从左向右推进行，适合蒙古文等少数语言，中文场景下用它会导致内容顺序反了——用户得从左往右读列，视觉动线错乱。
- 检查 DOM 结构是否为“一列一
<p>”或“一列一<div>”，vertical-rl对块级元素生效，不是对单个字符 - 若内容含英文或数字，默认会保持横向显示（如 “HTML5” 显示为 H T M L 5），需加
text-orientation: upright强制直立，但注意可读性下降 - 旧版 Safari（vertical-rl，必须加
-webkit-writing-mode: vertical-rl和-ms-writing-mode: tb-rl
line-height 在竖排中为什么控制的是“列间距”
因为 writing-mode 改变了块流方向：line-height 始终作用于“行内方向”的垂直距离。水平排版时，行内方向是 X 轴，所以 line-height 控制上下行距；竖排时，行内方向变成 Y 轴，line-height 就控制字符之间的上下（即视觉上的左右）间距。
- 设
font-size: 16px+line-height: 2，竖排效果是每字符上下留出 32px 空隙，相当于“列宽” - 别用
line-height: 24px这类固定值——字体缩放后列距不会同比例变化，移动端易重叠 - 若发现字符挤在一起，优先调大
line-height（1.8–2.2），而不是靠margin-right补救
margin 和 padding 在竖排下的方向翻转规则
所有盒模型方向属性都会随 writing-mode 自动映射：竖排时，margin-top 变成“左侧外边距”，padding-bottom 变成“右侧内边距”。这是最容易踩坑的地方——写完 CSS 看不出问题，但换到竖排就错位。
立即学习“前端免费学习笔记（深入）”；
-
margin-left→ 实际作用于顶部 -
margin-right→ 实际作用于底部 -
padding-top→ 实际作用于左侧 -
padding-right→ 实际作用于右侧（即文字列之间的空隙） - 调试时打开浏览器 DevTools，hover 查看 computed 样式，确认“Used values”里显示的方向是否符合预期
真正难的不是写出竖排样式，而是理解块流方向改变后，所有空间关系都翻转了。哪怕只改一行 writing-mode，整个 margin/line-height/padding 的语义就得重想一遍。没加固定 height 或没处理 text-orientation 导致英文横躺、列宽崩塌、首尾截断，都是常见现场。
