CSS布局中的逻辑属性应用_margin-inline与padding-block

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，不能只看本层声明。