margin-inline 不是合法单值属性，必须写作 margin-inline: 10px 20px（即需指定起始和结束值），否则无效；其行为依赖 writing-mode 和 direction，与父级 flex-direction 无关。
margin-inline 在 Chrome/Firefox 中为什么没效果
因为 margin-inline 是逻辑属性，它依赖于元素的书写方向（writing-mode）和文本方向（direction）才生效。默认 html 是水平从左到右（ltr），此时 margin-inline-start 等价于 margin-left，但直接写 margin-inline（不带后缀）本身不是合法 CSS 属性——它只是 margin-inline-start 和 margin-inline-end 的简写别名，**必须配对使用**。
常见错误现象：
– 写了 margin-inline: 10px 却没任何表现
– 在 Flex 或 Grid 容器里加了该属性，子项位置毫无变化
-
margin-inline不是单值属性，正确写法是margin-inline: 10px 20px（等价于margin-inline-start: 10px; margin-inline-end: 20px） - 若只设一边，必须用完整属性名：
margin-inline-start: 8px - 在
writing-mode: vertical-rl下，margin-inline-start实际作用在顶部，而非左侧——这点极易误判布局意图
padding-block 在 Safari 15.4 之前不支持
padding-block 用于控制块方向上的内边距（垂直方向），但它在旧版 Safari（≤15.3）中完全无效，且不触发降级行为——即样式静默失效，开发者很难第一时间察觉。
使用场景：
– 做多语言支持（含竖排中文、阿拉伯语 RTL）时，希望 padding 随 writing-mode 自动适配
– 组件库封装通用卡片，需避免硬写 padding-top/padding-bottom
立即学习“前端免费学习笔记（深入）”；
- 检查 CanIUse：
padding-block在 Safari 15.4+ 才开始支持，iOS Safari 同步滞后约 1–2 个版本 - 不要指望
@supports (padding-block: 1em)在旧 Safari 中可靠拦截——某些版本会错误返回 true - 稳妥方案是双写：
padding-block: 12px; padding-top: 12px; padding-bottom: 12px，现代浏览器会覆盖后者
逻辑属性和 display: flex 的方向耦合问题
当父容器是 display: flex 且设置了 flex-direction: column，子元素上写的 margin-block: 20px 依然按文档流块轴计算（即垂直方向），不会因父级 flex 轴向改变而翻转含义——这点和直觉相反，但符合规范。
容易踩的坑：
– 认为 margin-block 在 column flex 里“自动变成水平方向”
– 把 align-items 和逻辑属性混为一谈，以为设置 align-items: flex-start 就会影响 margin-inline-start 的基准线
-
margin-block始终对应当前元素自身的块轴（由writing-mode和direction决定），与父容器的flex-direction无关 - 如果想让子项在 column flex 中“左右留白”，该用
margin-inline，而不是误写margin-block - Flex 子项的
justify-content无法替代margin-inline：前者影响所有子项整体分布，后者控制单个元素自身偏移
用逻辑属性做 RTL 适配时，不要漏掉 border 和 background-position
只改 margin 和 padding 的逻辑属性，却忘了 border-inline-start 或 background-position-x，会导致 RTL 下视觉错位。比如一个带左箭头图标的按钮，在 RTL 模式下箭头仍朝左，就违背阅读习惯。
- RTL 适配需成套切换：
margin-inline-start→margin-inline-end，padding-inline-start→padding-inline-end，border-inline-start→border-inline-end -
background-position没有原生逻辑变体，得用background-position: right center配合direction: rtl手动调整 - 伪元素
::before的content若含 Unicode 方向字符（如\200F），需同步检查是否被逻辑属性遗漏影响
逻辑属性真正难的不是写法，而是判断「哪个方向算 inline」——它取决于当前元素的 writing-mode，而这个值可能被祖先元素继承或重写，调试时得一层层查 computed styles，不能只看本层声明。
