因为img是置换元素，其margin在所有方向均参与布局计算；而span是非置换行内元素，vertical方向margin不参与文档流定位，仅靠line-height和基线对齐。
为什么 img 的 margin-top 能推走兄弟元素，而 span 不行
因为 img 是置换元素（replaced element），它自带固有尺寸和渲染上下文，浏览器把它当作一个“黑盒”来处理，其 margin 在所有方向都参与布局计算；而 span 是非置换的行内元素（non-replaced inline element），它的垂直边距不参与文档流定位，只靠 line-height 和基线对齐来决定位置。
关键区别不在“是否是行内”，而在“是否被替换”：
- ✅ 生效的行内元素：img、input、video、iframe
- ❌ 无效的行内元素：span、i、em、strong
这不是 bug，是 CSS 规范明确规定的——W3C 定义置换元素为“脱离 CSS 格式化上下文之外的内容”，所以它的外边距必须完整生效，否则无法可靠控制图文混排间距。
margin-bottom 对 img 生效时，到底在推谁
它既推自己（影响自身在行框中的垂直位置），也推后续兄弟块级元素（如 p、div），但不推同级的其他行内内容（比如同一行里的文字）。
常见误解是以为 margin-bottom 会“撑开父容器高度”，其实不会——父容器高度仍由 line-height 或最高行内盒决定；真正被推开的是紧随其后的块级兄弟元素的上边缘。
典型场景：
- img 后跟一个 p，设置 img { margin-bottom: 20px; } → p 会上移 20px
- img 后跟一个 span，同样设置 → span 位置几乎无变化（仅可能因行高微调）
用 vertical-align 配合 margin 才能精准控制图片对齐
单独设 margin-top 对 img 有效，但若父容器是行内上下文（比如段落中嵌入图片），它的实际偏移还受 vertical-align 值影响。默认 vertical-align: baseline 会让图片底部对齐文本基线，此时 margin-top 是从基线往上推，不是从父容器顶部。
要避免意外错位，建议显式声明：
- img { vertical-align: top; margin-top: 10px; } → 从行框顶部起算
- img { vertical-align: middle; margin-bottom: 15px; } → 中线对齐后再向下留空
注意：如果父容器设置了 font-size: 0 或 line-height: 0，vertical-align 行为会异常，margin 的视觉效果也会失真。
负 margin 在置换元素上为何更“危险”
对 img 使用 margin-top: -10px 会真实上移它在文档流中的位置，可能导致遮挡前序内容或破坏行高；而对 span 设同样值，基本没反应——因为本来就不生效。
更隐蔽的问题是：负 margin-bottom 会让后续块级元素“提前入场”，例如：img { margin-bottom: -20px; } + p → p 的顶部可能切入 img 的内容区域，造成视觉重叠，且这种重叠在响应式缩放时更容易失控。
这类问题在图文混排组件（如文章摘要图+标题）中高频出现，调试时容易误判为定位或 z-index 问题，其实根源就在置换元素的 margin 特性被低估了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
