inline元素的margin-top/bottom不产生垂直位移是规范行为，因不参与行框高度计算；left/right margin及padding有效，但可能被line-height或背景遮盖；可控方案包括letter-spacing、word-spacing、HTML空白、inline-block（需处理间隙）或改用flex/gap。
inline元素的margin和padding为什么看起来“失效”
行内元素（如 <span></span>、<a></a>、<strong></strong>）的 margin-top 和 margin-bottom 确实不产生垂直位移，这是规范行为，不是bug。浏览器会解析它们，但**不参与行框（line box）的高度计算**，所以视觉上像“没生效”。margin-left 和 margin-right 是有效的，能推开左右相邻内容；padding 也生效，但可能被父容器的 line-height 或背景裁剪遮盖。
常见错误现象：
- 给
<span></span>加margin-bottom: 20px，下面的文字没被推开 - 加了
padding: 5px，上下内边距看不见，左右却明显 - 多个
<span></span>并排，想用margin-right隔开，但最后一项多出空白
真正可控的间距手段有哪些
调整 inline 元素间距，优先用语义合理、渲染稳定的方式：
- 用
letter-spacing控制字符级间距（适用于纯文本子元素，如单个字母或数字） - 用
word-spacing调整单词间空格宽度（对<span></span>包裹的词有效，但依赖其内部是否含空格） - 在 inline 元素之间写 HTML 空格或换行 —— 浏览器会将其转为一个空格字符，再受
font-size和letter-spacing影响 - 把 inline 元素设为
display: inline-block，此时所有margin和padding完全生效，且可设宽高
注意：inline-block 会保留 HTML 换行符生成的空白节点，导致意外间隙，可用父容器 font-size: 0 + 子元素重设 font-size 消除。
立即学习“前端免费学习笔记（深入）”；
box-sizing 对 inline 元素无效
box-sizing 属性只对 display 值为 block、inline-block、table-cell 等**可设置宽高的盒类型**起作用。对纯 inline 元素，设置 box-sizing: border-box 不会改变任何渲染行为 —— 因为它本来就不能指定 width 或 height，自然也无“content-box vs border-box”的尺寸解释逻辑。
如果你发现设置了 box-sizing 后效果变了，大概率是同时改了 display（比如改成 inline-block），真正起作用的是显示模式切换，不是 box-sizing 本身。
什么时候该放弃inline，改用flex或grid
当需要精确控制多个行内级内容的对齐、等距分布、响应式间隔时，硬撑 inline + 各种 hack 很容易失控。直接把父容器设为 display: flex，子元素自动变成 flex item（无视原有 display 值），此时：
-
gap属性可统一控制间距，不依赖 margin，无空白节点问题 -
align-items和justify-content解决垂直/水平对齐 - 子元素即使原来是
<span></span>，也能自由设margin、padding、width
兼容性提醒：IE11 支持 flex 但不支持 gap，需回退到 margin；现代项目中，gap 是最干净的解法。
复杂点在于：行内布局常嵌套在段落、标题等语义化结构里，强行套 flex 可能破坏流式阅读逻辑。得先判断——这组内容是不是真的属于“同一行内的装饰性分隔”，还是本质是“一组并列的可交互模块”。后者就别犹豫，换 display。
