shape-margin仅在shape-outside配合float、明确宽高、无overflow:hidden干扰等前提下才生效；它控制文字到轮廓的缓冲距离，非布局边距，单位推荐em，调试须先验证轮廓再设值。
shape-margin 不是 margin，它只在 shape-outside 有效时才起作用；写了但没效果，八成是 shape-outside 根本没生效。
为什么加了 shape-margin 文字还是紧贴图片？
这不是 shape-margin 失效，而是它根本没被浏览器计算——因为前置条件全没满足：
-
shape-outside必须配合float: left或float: right，float: none或没写 float 就等于没开开关 - 浮动元素得是块级：
<img alt="如何在CSS中使用shape-margin给浮动环绕文字留出空隙？" >默认是 inline，必须加display: block - 必须有明确宽高：
width和height（或aspect-ratio+width），否则circle(50%)这类函数无基准可算 - 父容器不能有
overflow: hidden或contain: layout，它们会截断浮动传播路径 - 文字内容得在普通流里：如果段落是
display: flex的直接子元素，环绕直接不触发
shape-margin 的单位和取值怎么选才靠谱？
shape-margin 的数值不是“离图片多远”，而是“离 shape-outside 描出的轮廓多远”。它的单位行为和直觉容易错位：
- 支持
px、em、rem，不支持 %（别信某些过时文档） - 用
em更稳妥：比如shape-margin: 1.2em，能随父文字大小缩放，小屏下不会挤成一条线 - 避免大数值：超过
32px在窄屏上常导致文字只剩首行环绕，后面全换行顶到下一块内容 - 别和
margin混着调：margin-right: 20px是推元素位置，shape-margin: 12px是推文字路径——两者叠加时，文字离轮廓是 12px，离元素右框可能是 32px
调试时怎么确认 shape-margin 真正在工作？
别靠肉眼猜。先验证轮廓，再调间距：
立即学习“前端免费学习笔记（深入）”；
- 在浮动元素上加
outline: 1px solid red，看它实际占位范围（矩形框） - 再加
background: rgba(0,0,0,0.1)，观察文字是否真的沿着你设想的形状流动 - Chrome DevTools 的 Elements 面板里，勾选 “Show shape outline” 可视化
shape-outside轮廓（注意：Firefox 默认关此功能，需手动开启layout.css.shape-margin.enabled） - 把
shape-margin临时设成40px+background半透，如果文字明显外扩一圈，说明它已生效；如果毫无变化，回头检查shape-outside是否被忽略
真正难的从来不是写对那行 shape-margin: 12px，而是每次换图、改尺寸、切断点时，都要重新校验 shape-outside 的几何基准有没有偏移——尤其是用 url() 或 polygon() 时，一个坐标错位，shape-margin 就在错误的轮廓上徒劳膨胀。
