图片底部间隙应优先用img { display: block }或vertical-align: bottom解决；::after仅适用于需动态生成间隙且无法修改HTML的特殊场景，且必须作用于父容器并设display: block和height。
直接用 ::after 解决图片底部间隙，不是“加个伪元素就行”，而是得绕过它默认的行内特性、避免引入新空白、并精准控制垂直位置——否则反而把问题搞复杂了。
为什么不能直接给 img 加 ::after？
因为 img 是替换元素，::after 无法附加在它上面（除非它是 content 可替换的容器，但原生 img 不支持）。你写 img::after { content: "" } 在所有浏览器里都会被忽略——DevTools 里根本看不到这个伪元素。
-
::after只能作用于**普通流中的容器元素**（如div、span、p），不能附加到img、input、br这类自闭合或替换元素上 - 想“在图片下方加东西”，必须把
::after放在图片的**父容器**上，再通过定位或布局让它“视觉上”贴着图片底边 - 如果父容器是
inline或inline-block，::after默认也是行内级，clear、margin-bottom都可能不按预期生效
::after 模拟“下垫层”时必须设 display: block 和 height
常见错误是只写 content: "" 就以为能占位，结果伪元素高度为 0，对齐和间隙控制完全失效。要让它真正撑开或锚定位置，得主动赋予尺寸和块级行为。
-
display: block是底线要求：否则margin、height、vertical-align全部无效 - 设
height: 4px（或具体像素/em）比靠line-height更可靠，尤其当父容器font-size: 0时，em 单位会失准 - 若需响应式间隙，用
height: 0.25em+ 父容器统一font-size，但务必确认父容器没被其他规则重置字号 - 别用
visibility: hidden或opacity: 0隐藏伪元素——它必须真实参与盒模型计算，否则间隙归零
用 position: absolute 锚定伪元素到底部，但得防脱离文档流
这是最可控的方式：让伪元素脱离父容器流，精准贴图底，又不干扰原有布局。但前提是父容器必须是 position: relative，且自身高度由图片决定（否则伪元素会掉出可视区）。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须加
position: relative，否则absolute会向上逐层找定位上下文，可能错位到 body 底部 -
::after设position: absolute; bottom: 0; left: 0; width: 100%，再用height或border-top表达间隙 - 如果父容器本身高度塌陷（比如只含浮动图片），先解决塌陷问题（如加
display: flow-root），否则bottom: 0无参考基准 - 慎用
transform: translateY()模拟间隙——它不占空间，父容器高度仍不含该间隙，可能影响后续元素间距
真正优雅的解法：不用 ::after，改用 vertical-align 或 display: block
95% 的图片底部间隙场景，::after 是绕远路。原生方案更轻量、无兼容风险、调试直观。
- 单张图片：直接
img { display: block }，一劳永逸，连父容器font-size都不用管 - 图文混排：用
img { vertical-align: bottom }，比middle更稳（middle依赖父行高，易受line-height波动影响） - 需要间隙值精确可控（比如 6px）：用
img { margin-bottom: 6px }，前提是图片已是块级；若不是，先加display: block - 用
::after的唯一合理场景：间隙需动态生成（如根据数据状态加不同图标+留白），且不能改 HTML 结构——这时才值得承担额外复杂度
伪元素不是万能胶，它解决图片间隙的前提是：你清楚父容器的定位上下文、盒模型状态、以及是否真需要一个“虚拟节点”来承载视觉逻辑。多数时候，一行 display: block 比十行 ::after 更接近优雅。
