用margin控制相邻图片间距时，需注意inline元素默认基线对齐导致的底部空白，应设vertical-align或display:block；多图推荐Flex布局，用gap替代margin更简洁可控。
用 margin 控制相邻图片的左右间距
两张 <img> 标签并排时，默认会紧挨着，中间没空隙。最直接的办法是给其中一张加 margin-right 或 margin-left：
-
margin-right: 12px;让左边图片往右推，和右边图片拉开距离 -
margin-left: 12px;让右边图片往右移，效果一样，但逻辑上更清晰（避免影响后续元素） - 如果图片在
<div>里水平排列，且数量多，建议统一加类名，比如img.gap-right { margin-right: 12px; }，最后一张去掉该类 - 别只写
margin: 12px;—— 它会同时影响上下边距，可能把图片“顶出”容器，尤其当父容器高度固定时
图片底部有奇怪空白？不是 margin-bottom 没起作用
你设了 margin-bottom: 0;，但图片下方还是有一条缝——这不是 margin 的问题，是 <img> 默认作为 inline 元素，按文字基线（baseline）对齐，下面留了字母 g/j/y 的下伸空间。
- 最快解法：
vertical-align: bottom;或vertical-align: middle;加在<img>上 - 如果图片是独立展示（比如 banner、头图），直接用
display: block;，它彻底脱离行内流，margin-bottom立刻生效 - 注意：全局写
img { vertical-align: bottom; }可能破坏已有图文混排，优先加具体类名，如.card-img { vertical-align: bottom; } - 若父容器有
line-height，也建议同步设为line-height: 1;，否则空隙可能残留
用 Flex 布局统一管理多张图片的间距与对齐
当图片数量不固定、或需要响应式调整（比如小屏堆叠），硬写一堆 margin 很难维护。Flex 是更现代、可控的方案。
- 给图片的父容器加：
display: flex; gap: 16px;——gap会自动在每两张图之间插入等距空白，比手动设margin干净得多 - 垂直方向对齐用
align-items: center;或flex-end;，不再受vertical-align限制 - 如果图片要换行（比如网格布局），加
flex-wrap: wrap;，再配合justify-content控制水平分布 - 注意：
gap在老版本 Safari（fallback：先设margin-right，再用@supports (gap: 1rem)覆盖
源码里的换行和空格也会产生间隙
这个最容易被忽略：HTML 源码中 <img> 和下一个 <img> 之间的换行、缩进、空格，会被浏览器解析成一个空格字符，显示为约 4px 宽的不可见间隙。
立即学习“前端免费学习笔记（深入）”；
- 删掉 HTML 中图片标签之间的所有空白符是最彻底的解法，比如写成
<img><img><img> - 或者给父容器设
font-size: 0;，再单独给图片内的文字（如有）恢复字号 —— 但仅适用于纯图片容器 - Flex 布局天然无视这类空白，所以一旦用了
display: flex;，这个坑就自动绕过了 - 开发者工具里看到的“间隙”往往高亮不到，hover 时只框住图片本身，那基本就是这个原因
