box-decoration-break: clone 是解决跨行内联元素左右 padding 消失的唯一有效方案，它使每行片段独立渲染完整 padding、border-radius 和背景；slice（默认）仅整体绘制后切割，导致中间行左右 padding 丢失。
box-decoration-break 本身不“保持”内边距，它决定内边距在跨行时如何被绘制——slice（默认）会让中间行丢失左右 padding，clone 才能让每行都渲染完整 padding。
为什么加了 padding 跨行后左右空白却消失了？
这不是样式没生效，而是 box-decoration-break: slice 的标准行为：浏览器先把整个 span 当作一个逻辑盒子画完边框、圆角和 padding，再按换行断点“切开”，中间片段只保留上下部分，左右 padding 被切断后自然消失。
常见触发场景包括：
– 用 span 高亮长文本（如 <span class="highlight">关键词匹配结果…</span>）
– 行内按钮带 padding + border-radius，内容过长自动折行
– 多列布局（columns）中强调文本跨列
box-decoration-break: clone 必须满足的三个条件
只写 box-decoration-break: clone 很可能没反应，真正起效要同时满足：
立即学习“前端免费学习笔记（深入）”；
- 元素必须是
display: inline或inline-block（block不会因换行产生片段） - 必须真实发生布局断裂：靠
width限制 +white-space: normal触发自动换行，不是用<br>或display: block强制分段 - 必须显式声明前缀：
-webkit-box-decoration-break: clone，Safari（尤其是 iOS 16.4 之前）和部分 Android WebView 完全忽略无前缀版本
padding 在 clone 模式下的实际表现
clone 不是复制值，而是让每个换行片段独立走一遍盒模型绘制流程，所以：
- 每行两端都会重新计算
border-radius和padding，首尾都能看到完整圆角和左右留白 -
padding会正常作用于每行，但margin依然无效（CSS 规范明确排除） - 若同时用了
background-image或复杂渐变，滚动时低端 Android 设备可能出现轻微重绘抖动 - 它不支持动画：
transition或@keyframes中修改该属性无效果
容易被忽略的兼容性细节
即使 Chrome 130+ 已原生支持 box-decoration-break，iOS Safari 仍依赖 -webkit- 前缀；Autoprefixer 不会自动补这个前缀，必须手写。另外，Flex 或 Grid 容器中的子项默认不触发片段化，该属性在这些布局中直接失效——它只对「换行 / 多列 / 分页」这类 fragmentation context 生效。
