margin-inline按writing-mode和direction动态映射，非“不分左右”；默认horizontal-tb+ltr时start为左、end为右，vertical-rl时start变顶部；需显式锁定流向并注意仅作用于inline轴。
margin-inline 不是“不分左右”，而是按逻辑流向动态映射
加了 margin-inline 却没效果，大概率是因为你把它当成了“自动适配左右的 margin”，但它实际依赖的是当前元素的 writing-mode 和 direction。默认 writing-mode: horizontal-tb + direction: ltr 时，margin-inline-start 确实等于左，margin-inline-end 等于右；但一旦父容器设了 writing-mode: vertical-rl，start 就变成顶部，end 变成底部——它不回避方向，只是把“方向”交由上下文决定。
所以别指望它“不分左右”，要让它稳定响应，得先锁住逻辑流向：
- 显式设置
writing-mode: horizontal-tb和direction: ltr（或rtl），避免依赖浏览器默认 - 确保父容器没意外覆盖
direction，比如html[dir="rtl"]会影响所有后代 - 对 flex 或 grid 子项使用
margin-inline时，注意它只作用于 inline 轴（即主轴为 row 时才管左右）
用 clamp() 配合 margin-inline 实现真正弹性间距
直接写 margin-inline: 1rem 是静态的；要响应屏幕宽度变化，必须让值本身可变。现代方案是把 clamp() 套进 margin-inline：
.card {
margin-inline: clamp(0.5rem, 4vw, 2rem);
}这个写法在小屏取 0.5rem（保可读性），中屏随宽度线性伸缩（4vw），大屏封顶到 2rem（防过度留白）。关键点：
立即学习“前端免费学习笔记（深入）”；
- 三参数必须统一单位：最小/最大用
rem，中间用vw或vmin；禁用%，它依赖父宽，语义模糊 - 旧版 Safari（≤16.4）需加
-webkit-clamp()前缀，并提供 fallback：margin-inline: 1rem; margin-inline: clamp(0.5rem, 4vw, 2rem); - 如果同时需要上下响应式间距，用
margin-block: clamp(0.75rem, 3vmin, 1.5rem)——vmin比vw更适合垂直方向，防止窄高屏（如手机横屏）间距爆炸
兼容性兜底：IE 和旧 Safari 下如何 fallback
margin-inline 在 IE 中完全不支持，Safari ≤15.6 对 clamp() 支持也不稳定。纯 CSS 兜底不是加一堆媒体查询，而是分层控制：
- 先写传统
margin作为基础值：margin: 1rem; - 再用
@supports升级逻辑属性：@supports (margin-inline: 1rem) { .card { margin-inline: clamp(0.5rem, 4vw, 2rem); margin-block: initial; } } - 如果项目需支持 IE，放弃
margin-inline，改用 CSS 自定义属性 + 媒体查询集中管理：:root { --gutter: 1rem; } @media (min-width: 768px) { :root { --gutter: 1.5rem; } } .card { margin: var(--gutter); }
注意：不要在同一个选择器里混用 margin 和 margin-inline，后者会覆盖前者，且无法预测覆盖时机。
为什么 margin-inline + flex-wrap 容易出错
在 flex-wrap: wrap 容器里给子项设 margin-inline，常见现象是首行正常、第二行左边距消失或错位。根本原因不是属性失效，而是：
- Flex 项默认
align-self: stretch，但margin-inline只作用于 inline 轴，不影响 cross 轴对齐，容易被align-content干扰 - 换行后，新行第一个子项的
margin-inline-start仍会生效，若容器未设padding-inline-start，它就直接顶到容器边缘，视觉上像“左边距没了” - 更隐蔽的问题：当子项宽度用
calc(50% - var(--gutter))计算时，margin-inline的弹性值会让减法结果不稳定，导致换行点偏移
稳妥做法是：flex 容器内优先用 gap 控制项间距离，margin-inline 只用于容器自身与外层内容的间距。真要混用，务必配合 padding-inline-start 补齐首项左侧空间，并用 justify-content: flex-start 显式声明对齐基准。
