margin-top 在 vertical-rl 下往右推，是因为 writing-mode 彻底翻转布局坐标系，使 margin-top 作用于 inline-start 方向（即视觉右侧），属规范行为而非 bug。
vertical-rl 下 margin-top 为什么往右推？
writing-mode: vertical-rl 不是“把文字转90°”，而是彻底翻转了 CSS 布局坐标系：原本的 inline-axis（行内方向）变成垂直，block-axis（块方向）变成水平。结果就是——所有物理方向属性失去原意。
典型现象：margin-top 实际作用在 *inline-start* 方向，也就是视觉上的“右”；padding-bottom 落在 *inline-end*，即“左”。你写的 margin-top: 20px，浏览器真就把它当“往右撑开20px”来执行。
这不是 bug，是规范行为。CSS 逻辑属性才是唯一可靠解：
-
margin-block-start替代margin-top（始终指向内容流起始端） -
padding-inline-end替代padding-right（始终指向行内结束侧） - 避免混用
top/left和writing-mode，它们不会自动适配
IE9 及以下：-ms-writing-mode 的 margin 映射完全反直觉
-ms-writing-mode: tb-rl 是 IE9 及更早版本唯一认的写法，但它和现代 vertical-rl 不是简单前缀关系——它是另一套老式盒模型。
常见错误现象：
- 写了
margin-top: 10px，元素却向右偏移 -
padding-bottom撑开的是顶部空间 - height/width 行为错乱，容器尺寸失控
必须手动重映射所有方向性间距：
-
margin-top→ 改用margin-right -
margin-bottom→ 改用margin-left -
padding-top→ 改用padding-right -
padding-bottom→ 改用padding-left
而且得配合 display: inline-block 或 float: left，否则块级容器连基本尺寸都拿不住。
line-height 和 padding 在 vertical-rl 下为何“变矮”？
line-height 在 vertical-rl 中控制的是 *字与字之间的横向距离*（即列间距），不是你眼睛看到的“行距”。所以调 line-height: 2 没反应？它其实生效了，只是作用方向错了。
同理：padding-top/padding-bottom 在竖排下变成左右内边距，padding-left/padding-right 才是上下。
实操建议：
- 想控制“视觉行距”（字与字垂直间隔）→ 用
line-height，但值要按字体大小手动试，比如font-size: 16px; line-height: 32px - 想加顶部空白 → 用
padding-block-start，不是padding-top - IE9 下没
padding-block，只能靠padding-right+display: inline-block模拟
为什么 autoprefixer 不能解决 writing-mode 兼容问题？
Autoprefixer 只做语法补全，比如给 flex 加 -webkit-。但它不会把 writing-mode: vertical-rl 转成 -ms-writing-mode: tb-rl——这是语义转换，不是加前缀。
更关键的是：-ms-writing-mode: tb-rl 和 writing-mode: vertical-rl 行为不兼容。你不能靠层叠让两者共存，因为：
- IE9 看到
writing-mode直接跳过整条声明（解析器对未知属性是“跳过整条”，不是“忽略值”） - 现代浏览器看到
-ms-writing-mode也直接忽略 - 如果两个声明都在，且顺序不对，可能触发意外覆盖
正确做法是用条件注释或 JS 检测，或干脆分文件加载：IE9 专用 CSS 单独写 -ms-writing-mode: tb-rl + 全套重置规则，其他浏览器走标准流。
最易被忽略的一点：writing-mode 改变的不只是文字方向，它让整个布局上下文失效。你之前依赖 top/left、flex-direction: row、甚至 text-align: right 的逻辑，在 vertical-rl 容器里全得重想一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
