margin-inline 替代 margin-left/right 以适配 RTL/vertical-rl：margin-inline: 12px 等价于 margin-inline-start: 12px; margin-inline-end: 12px，不支持两值简写；迁移需语义判断，Chrome 69+、Firefox 63+、Safari 15.4+ 支持。
margin-inline 替代 margin-left/margin-right 的实际写法
当页面需要支持从右向左（RTL）或从上向下（vertical-rl）等书写模式时，margin-left 和 margin-right 会固定绑定物理方向，导致布局在 RTL 下错位。用 margin-inline 可让浏览器自动映射到当前 direction 和 writing-mode 下的“起始”和“结束”侧。
实操建议：
-
margin-inline: 12px等价于同时设置起始侧和结束侧为 12px（即margin-inline-start: 12px; margin-inline-end: 12px） - 要只控制一侧，必须显式写
margin-inline-start或margin-inline-end；margin-inline: 8px 16px是非法语法（不支持两值简写） - 旧代码迁移时，别直接全局替换
margin-left → margin-inline-start：若原样式依赖 LTR 物理位置（比如图标始终在左边），改后在 RTL 下图标会跑到右边——得先确认语义是否真该随文本流切换 - Chrome 69+、Firefox 63+、Safari 15.4+ 支持；Safari 15.0–15.3 中
margin-inline在writing-mode: vertical-rl下有渲染偏移 bug，需加transform: translateZ(0)触发重绘规避
padding-block 处理垂直内边距的兼容性要点
padding-block 作用于块轴（block axis），也就是文档流中“行内内容堆叠的方向”。它替代的是 padding-top/padding-bottom，但语义更准确：在 vertical-lr 模式下，它控制的是“上下”还是“左右”，由 writing-mode 决定，而非固定物理方向。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 设了
writing-mode: vertical-rl却仍用padding-top: 20px，结果 padding 出现在视觉左侧（因为此时 top 对应物理左）——正确做法是改用padding-block: 20px -
padding-block: 10px 16px合法，表示padding-block-start: 10px; padding-block-end: 16px；但 Safari 15.4 之前不支持两值写法，必须拆成两个声明 - 若父容器未设置
direction或writing-mode，padding-block行为与padding-top/bottom一致，但不能因此认为二者可互换——逻辑属性的意义在于“响应式流向”，不是单纯别名
如何安全地渐进式迁移传统盒模型代码
一次性重写所有 margin/padding 风险高，尤其在混合使用 CSS-in-JS、第三方组件库的项目中。推荐按“场景 > 组件 > 全局”三级推进。
实操建议：
- 优先在新写的 UI 组件（如
Card、Toolbar）中启用逻辑属性，用@supports (margin-inline: 0)包裹，避免老浏览器降级失败 - 对已有组件，先用 PostCSS 插件
postcss-logical自动转换（注意：它无法处理动态拼接的 class 名或 JS 内联样式） - 不要在 reset.css 或 normalize.css 层面替换，因为部分基础样式（如
button默认margin）被 UA 样式控制，强行覆盖逻辑属性可能引发不可预期的继承行为 - 测试时必须手动切换浏览器 devtools 的
Rendering > Emulate CSS media > direction和writing-mode，不能只靠 RTL 语言环境
display: flex/grid 下逻辑属性的行为差异
Flex 和 Grid 容器内部，主轴（main axis）和交叉轴（cross axis）的定义会覆盖块/内联轴的默认映射，导致 margin-inline 和 padding-block 的表现与普通流不同。
关键点：
- 在
flex-direction: row的 flex 容器中，margin-inline仍作用于 flex item 的内联方向（即水平方向），但margin-block才真正对应交叉轴（垂直）；此时padding-block不再等价于padding-top/bottom，而取决于 flex 容器的align-items - Grid 中更复杂：
padding-block始终基于网格容器的块轴（即grid-template-rows方向），不受grid-auto-flow影响；但若用grid-auto-flow: column，margin-inline会映射到列方向，容易误判 - 没有“万能替代公式”——逻辑属性不是物理属性的同义词，而是新坐标系下的独立概念。遇到嵌套 flex/grid 时，务必用 devtools 的 Layout 面板查看 actual inline/block 尺寸，而不是凭经验猜
margin-inline-start，后者才该。 
