margin-inline和padding-block是逻辑属性，行为由direction和writing-mode决定；必须写两个值（如10px 20px）才有效，单值写法被忽略；safari≤15.3不支持padding-block/margin-block且静默失效，需双写回退。
不能在 HTML 中“通过” margin-block/margin-inline 设置外边距——它们是纯 CSS 属性，必须写在 style 或样式表里，HTML 标签本身不支持直接声明这些属性。
为什么写了 margin-inline: 10px 却没效果？
最常见错误是当成单值物理属性用。它不是 margin-left 的别名，而是 margin-inline-start 和 margin-inline-end 的简写，语法要求明确区分起始和结束：
-
margin-inline: 10px 20px✅ 等价于margin-inline-start: 10px; margin-inline-end: 20px -
margin-inline: 10px❌ 单值写法在规范中无效，现代浏览器会忽略整条声明 - 只设一边？必须用完整属性：
margin-inline-start: 8px或margin-inline-end: 12px
margin-block 的“上/下”到底指哪边？
它不固定对应 margin-top/margin-bottom，而取决于 writing-mode：
- 默认
writing-mode: horizontal-tb（横排）→margin-block-start=margin-top - 设了
writing-mode: vertical-rl（竖排右到左）→ 块流方向变成从右向左，此时margin-block-start指向右侧边缘，不是顶部 - 没显式设置
writing-mode时，浏览器按默认值解析，看起来“像 top/bottom”，但逻辑上仍是块轴起始点
Safari 中 padding-block 静默失效怎么办？
margin-block 同样受 Safari 兼容性影响，尤其 iOS Safari ≤15.3 完全不支持且不报错：
-
@supports (margin-block: 1em)不可靠——旧版 Safari 可能错误返回true - 稳妥写法是双写：
margin-block: 12px;<br>margin-top: 12px;<br>margin-bottom: 12px;
- 现代浏览器优先应用
margin-block，旧版 Safari 自动回退到后两行 - 注意：不要指望它在
display: flex容器里随flex-direction改变方向——margin-block始终按文档流块轴计算
真正容易被忽略的点是：逻辑属性的意义只在 direction 或 writing-mode 是变量时才成立；如果项目只做英文 LTR 页面，硬套 margin-inline 反而增加理解成本，且无法规避 Safari 兼容问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
