行内图像默认 vertical-align: baseline 导致与文字基线对齐而非底边，产生错位；图像间空白源于HTML换行/空格；推荐用 flex 布局替代 inline/inline-block 以规避对齐和间隙问题。
行内图像默认对齐基线，不是底部
行内图像（vertical-align: baseline 对齐——即图像底部与父元素中文字的基线对齐，而非文字底边。这会导致图像看起来“悬浮”在文字上方，旁边文字有明显错位感。
常见现象：图像右侧的文字比图像顶部还低，或换行后图像和文字上下不齐；用 display: inline-block 后仍错位，往往就是没调 vertical-align。
- 最稳妥做法是统一设为
vertical-align: bottom或vertical-align: middle - 若需与文字等高对齐，优先试
vertical-align: text-bottom（对齐文字底边）或vertical-align: middle（视觉居中） - 避免用
vertical-align: baseline，除非你明确需要和字母“g”“y”的下伸部对齐
图像之间留白是换行符/空格导致的
HTML 中连续的 ），造成图像间出现约 4px 的间隙。
这不是 CSS margin，清不掉 margin 也没用；也不是 bug，是 HTML 规范行为。
立即学习“前端免费学习笔记（深入）”；
- 解决方法一：标签写在同一行，如
- 解决方法二：父容器设
font-size: 0，子元素再单独设字体大小（适用于纯图像布局） - 解决方法三：用
display: flex替代行内流，彻底绕过文本间隙问题（推荐用于现代布局）
用 display: inline-block 要小心 vertical-align 和 whitespace
很多人给 display: inline-block 是为了方便控制宽高或加 margin，但这反而放大了对齐和空白问题。
因为 inline-block 元素仍受 vertical-align 影响，且同样继承父级的空白符渲染逻辑。
- 必须同步设置
vertical-align，否则可能比默认baseline更难看 - 如果父容器有
line-height，它也会影响inline-block图像的垂直位置 - 慎用
margin-top/bottom调整垂直位置——它会撑开行高，引发连锁错位
响应式图像排列建议直接上 Flex 布局
纯行内图像排列在响应式场景下非常脆弱：缩放、换行、字体变化都会影响对齐；而 flex 能隔离文本流干扰，语义清晰，兼容性也足够（IE10+）。
只需三行 CSS 就能替代所有 vertical-align + 空白 hack：
img { display: block; }
.image-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
注意：align-items: center 是垂直居中，如果要顶部对齐改用 flex-start；gap 替代 margin 控制间距更可靠。
真正容易被忽略的是：图像本身尺寸不一致时，flex 下的 align-items 行为会和预期不同——比如一张高图、一张矮图，默认居中会让它们“上下浮动”，此时应加 align-self: flex-start 单独约束。
