应使用inline-size/block-size替代width/height，并配套padding-inline/padding-block等逻辑属性，否则在vertical-rl下因物理属性语义锁定导致尺寸错乱；box-sizing: border-box需与逻辑属性协同生效。
直接用 inline-size 和 block-size 替代 width、height，再配 padding-inline/padding-block、margin-inline/margin-block，否则在 vertical-rl 下尺寸必然错乱——这不是兼容性问题，是盒模型语义被物理属性锁死了。
为什么 width 在 vertical-rl 下会“反着算”
浏览器对 width 和 height 的解释始终绑定物理轴：即使设了 writing-mode: vertical-rl，width 仍按水平方向解析，但此时“水平”视觉上是上下；height 反而控制左右。结果就是 padding-top 被加在物理左/右，box-sizing: border-box 却仍从 width 里扣减这些 padding，导致总高度远超预期。
-
width: 200px; padding: 10px; box-sizing: border-box在竖排下，实际占用高度 ≈ 220px（因为 padding 被加在上下方向） - 卡片宽度忽大忽小，往往是因为用了
padding-top却没意识到它在vertical-rl下映射到了左侧 - 只换
margin类属性而保留width/height，等于只换表皮不换骨架，照样崩
inline-size 和 block-size 怎么配 box-sizing 才不翻车
inline-size 对应文字流方向（LTR/RTL 是水平流，vertical-rl 是垂直流），block-size 始终垂直于它。二者和 box-sizing: border-box 联动时，只有配套用 padding-inline 和 border-inline，尺寸计算才真正一致。
- 必须成对替换：
width → inline-size，height → block-size，混用即失效 - Safari ≤15.6 中
inline-size+box-sizing: border-box会忽略border-inline，造成尺寸偏小，得加@supports (inline-size: 100px)降级 - 旧版 Edge（EdgeHTML）完全不支持
inline-size作为box-sizing基准，静默回退到width - 在 flex 容器里对子项设
inline-size很可能被主轴尺寸覆盖，优先用flex-basis或min-inline-size
padding-block 和 padding-inline 到底控制哪边
padding-block 作用于块轴（block axis），也就是文字堆叠的方向；padding-inline 作用于行内轴（inline axis），也就是文字排列的方向。二者不等于“上下”或“左右”，而是随 writing-mode 动态映射。
立即学习“前端免费学习笔记（深入）”；
-
writing-mode: horizontal-tb→ 块轴=垂直方向 →padding-block控制上下，padding-inline控制左右 -
writing-mode: vertical-rl→ 块轴=水平方向（右→左）→padding-block控制左右，padding-inline控制上下 - 想让竖排标题顶部留 12px、底部留 8px，写
padding-inline: 12px 8px（起始→结束 = 上→下），别碰padding-top - Safari 15.4+ 才完整支持两值简写
padding-inline: 12px 8px，旧版需拆成padding-inline-start和padding-inline-end
最易被忽略的一点：逻辑属性不是语法糖，它是把方向耦合从样式层抽离的必要手段；dir 没设，margin-inline-start 就永远按 LTR 解析，阿拉伯语页面照样左对齐——这跟写错一个属性无关，而是整个方向系统没启动。
