margin-trim 仅 safari 16.4+ 支持，仅对 block 方向生效，用于自动裁剪容器首尾子元素的 margin-block-start 和 margin-block-end，不可替代 gap，且不解决外边距合并。
margin-trim 确实能自动去除容器首尾子元素的多余边距，但目前只在 Safari 16.4+ 中可用，且仅对 block 方向（垂直流）生效，inline 方向（如水平排列）完全不生效。
什么时候该用 margin-trim: block
适用于垂直堆叠的子元素（如 <p></p>、<li>、<div>），且你希望父容器自动忽略第一个子元素的 <code>margin-top 和最后一个子元素的 margin-bottom。
- 典型场景：文章段落列表、垂直导航菜单、卡片内标题+描述组合
- 必须配合子元素自身有明确的
margin（比如p { margin: 1em 0; }）才看得出效果 - 父容器需是块级上下文（默认即可），无需额外设置
display - 不能替代
gap：它不产生间距，只是“裁掉”已有边距；而gap是主动添加间隙
margin-trim 的值怎么选
目前只有 block、block-start、block-end 在 Safari 中实际起作用；inline 相关值（如 inline-start）当前无渲染效果。
-
margin-trim: block→ 同时裁剪首子元素的margin-block-start和尾子元素的margin-block-end -
margin-trim: block-start→ 只裁首子元素顶部边距（比如去掉第一个<h2></h2>的上边距） -
margin-trim: block-end→ 只裁尾子元素底部边距（比如去掉最后一个<p></p>的下边距） -
margin-trim: none→ 显式关闭（默认就是none）
为什么写了没反应？常见失效原因
不是写错了，大概率是浏览器或上下文不支持。Safari 是唯一实现者，Chrome/Firefox/Edge 均未启用该属性（截至 2026 年 7 月）。
- 检查是否在 Safari 16.4+ 中测试 —— 旧版 Safari 或其他浏览器会直接忽略该声明
- 确认子元素使用的是逻辑边距（
margin-block-start）或传统边距（margin-top），两者都支持，但不要混用方向冲突的写法 - 父容器若设置了
overflow: hidden或contain: layout，可能干扰裁剪行为（实测 Safari 中一般不影响，但极端嵌套下偶发） - 不要指望它解决兄弟元素间的外边距合并（
margin-collapse），它只管“容器边缘与子元素边距”的关系
真正要用它，得接受它是 Safari 专属的「锦上添花」功能，而不是通用解法；生产环境仍需回退到 :first-child/:last-child 重置或改用 gap + flex/grid 布局——毕竟兼容性断层太明显。
