图片默认有空白间隙是因为其为inline元素并按基线对齐，受line-height影响产生约4px间隙；解决方法包括设display:block、vertical-align、父容器font-size:0、flex布局或删除HTML空白符。
图片默认有空白间隙是因为行内元素特性
HTML 中 <img alt="html中的如何使两张图片中间没有距离" > 默认是 inline 元素，会像文字一样对齐基线（baseline），下方自动留出约 4px 空隙——这不是 margin 或 padding，而是字体行高（line-height）导致的“看不见的底座”。哪怕你把 margin 和 padding 都设为 0，间隙还在。
- 常见错误现象：
<img src="a.jpg" alt="html中的如何使两张图片中间没有距离" ><img src="b.jpg" alt="html中的如何使两张图片中间没有距离" >在页面上总有一条细缝，inspect 元素发现父容器里图片底部有空白 - 最直接的解法是改 display：把
<img alt="html中的如何使两张图片中间没有距离" >设为display: block或display: inline-block并配vertical-align: top/middle/bottom - 如果图片必须保持 inline 行为（比如混排文字），用
vertical-align: bottom通常比top更稳，因为 baseline 对齐在不同字体下表现不一致
父容器 font-size 为 0 是个有效但要小心的技巧
由于 inline 元素间的空白来自 HTML 换行/空格被渲染成字符，而字符大小取决于父容器的 font-size，所以把父容器 font-size: 0 能“消灭”这个间隙。但副作用明显：子元素若继承该设置，文字就看不到了。
- 适用场景：纯图片横向排列，且父容器不包含其他需显示文字的内容
- 正确写法是先设父容器
font-size: 0，再给图片单独设回正常字号（如果图片含文字或伪元素）；更稳妥的是只给图片设font-size: 0，但图片本身不用字号，所以实际只需重置父容器 + 子元素不继承即可 - 兼容性没问题，但容易漏掉恢复子文字的
font-size，尤其用 CSS-in-JS 或组件嵌套时
flex 布局是最现代也最省心的方案
用 display: flex 把图片父容器变成弹性盒子，间隙问题天然消失——因为 flex item 默认不参与 inline 布局，也不受 white-space 影响。
- 只需三行 CSS：
display: flex、gap: 0（显式声明无间隙）、flex-wrap: nowrap（防换行） - 注意旧版 Safari 对
gap支持弱，可加margin-right: -4px兜底，但仅当最后一个图片不需要右间距时才安全 - 如果图片需要响应式等比缩放，flex 本身不控制尺寸，得额外加
max-width: 100%和height: auto到<img alt="html中的如何使两张图片中间没有距离" >
别忽略 HTML 源码里的换行符本身
即使 CSS 全部写对，如果写成：
立即学习“前端免费学习笔记（深入）”；
<div class="gallery"> <img src="a.jpg" alt="html中的如何使两张图片中间没有距离" > <img src="b.jpg" alt="html中的如何使两张图片中间没有距离" > </div>
这两行之间的换行和缩进，在 inline 模式下就是真实存在的空白字符。浏览器会把它当一个空格渲染，宽度≈半个中文字符。
- 解决方法之一是删掉源码中 img 标签之间的所有空白（包括换行），写成一行：
<img alt="html中的如何使两张图片中间没有距离" ><img alt="html中的如何使两张图片中间没有距离" >—— 可读性差，但有效 - 更实用的是用注释“吃掉”空白：
<img alt="html中的如何使两张图片中间没有距离" ><!-- --><img alt="html中的如何使两张图片中间没有距离" >，或者用构建工具（如 PostHTML）自动压缩 HTML - 这点常被忽略，尤其在模板字符串或 JSX 中拼接图片时，
{list.map(...)}如果没做.join('')，也可能带入逗号或换行
图片之间有没有距离，本质不是“怎么去掉 margin”，而是“怎么绕过 inline 元素的渲染规则”。越早意识到这点，越不容易在 margin: 0 上反复试错。
