用 display: inline-block 并排图片需设 vertical-align 且消除空白符；flex 布局更可靠，用 gap 控制间距；float 易致塌陷不推荐；父容器撑不开需检查 width、max-width、display 覆盖及拼写错误。
用 display: inline-block 让图片并排显示
默认情况下，<img> 是内联元素，但浏览器会为它自动添加换行间隙（其实是行内元素间的空白符导致的），所以两张图紧挨着写，常会有一像素左右的错位或空隙。用 display: inline-block 能稳定控制对齐，又保留内联布局特性。
实操建议：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 给两张
<img>都加style="display: inline-block; vertical-align: top;"，vertical-align必须显式设为top、middle或bottom，否则可能因基线对齐产生意外间隙 - 确保 HTML 中两张图标签之间**没有换行或空格**，或者把父容器字体大小设为
0（再单独给图片设font-size: initial）来消除空白符影响 - 注意：如果图片高度不一致，
vertical-align: baseline（默认值）会让底边对齐，看起来像“一高一低”，这是最常被忽略的对齐问题
用 flex 布局更可靠地控制并排与间距
当需要等高、居中、响应式或留白时，flex 是目前最稳妥的选择，兼容性已覆盖所有现代浏览器和 IE11+。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把两张图包进一个
<div style="display: flex; gap: 8px;">，gap直接控制间距，不用额外 margin - 避免只对
<img>设flex，而是对父容器设display: flex，子元素默认就是 flex item - 如果图片宽高不确定，加
flex-shrink: 0防止被压缩；需要自适应宽度则用flex: 1（但两张图会均分空间，慎用） - IE11 不支持
gap，得用margin-right模拟，且最后一张图要加margin-right: 0
为什么 float 现在不推荐
float 曾是经典方案，但现在容易引发父容器塌陷、清除浮动遗漏、响应式错乱等问题，尤其在现代项目中维护成本高。
常见错误现象：
- 父
<div>高度变成 0，内容往下掉——因为浮动元素脱离文档流 - 加了
clear: both但位置不对，比如写在图片后面而不是父容器末尾 - 在 Flexbox 或 Grid 容器里混用
float，行为不可预测，部分浏览器直接忽略 - 移动端缩放时，
float元素可能突然换行，而flex能配合flex-wrap更可控
图片并排后撑不开父容器？检查这些地方
即使写了 display: flex 或 inline-block，父容器仍显示为窄条，大概率是以下原因。
排查要点：
- 父容器本身有
width限制（比如width: 200px），而两张图加起来超出了——先去掉宽度看是否恢复 - 图片设置了
max-width: 100%但父容器太窄，导致图片被强制压缩变形；可加height: auto保持比例 - CSS 重置样式（如某些 UI 库）把
img设成了display: block，覆盖了你的inline-block，需提高选择器优先级或用!important（临时调试可用） - 开发者工具里看 computed 样式，确认
display和width是否真被应用，有时是拼写错误（比如写成dispaly）
