HTML页面图片间出现未知空白，未设置margin且Chrome检查工具无法定位如何解决

问题根源 #

你遇到的图片未知空白是行内元素的默认特性导致的，和margin无关。img标签属于行内替换元素，当HTML中多个img标签之间存在换行、空格字符时，浏览器会将这些字符渲染为一个宽度约为4px的空白间隙，这就是你用检查工具找不到margin相关设置的原因——这个间隙属于文本字符的占位，不属于元素外边距。

常用修复方案 #

• 方法1：给图片容器设置字体大小为0
  空白字符本质是文本，给父容器设置字号为0后间隙就会消失，如果容器内还有其他文本内容，单独给对应文本元素设置字号即可。
  示例代码：

#imageBox {
  font-size: 0;
}

• 方法2：使用flex布局
  给图片容器设置flex布局，从根源上消除行内元素的空白特性，还可以方便调整图片间距和对齐方式，需要多行排列时补充flex-wrap属性：
  示例代码：

#imageBox {
  display: flex;
  flex-wrap: wrap;
}

• 方法3：调整img的垂直对齐方式
  img默认垂直对齐方式为baseline，会和文本基线对齐产生底部间隙，给img设置vertical-align: bottom;或者vertical-align: top;可以消除这部分间隙，配合方法1使用效果更稳妥：
  示例代码：

img {
  vertical-align: bottom;
}

• 方法4：删除HTML中img标签之间的空格和换行
  把所有img标签写在同一行，中间不留任何空白字符，也可以消除间隙，不过会影响代码可读性，不推荐。

内容的提问来源于stack exchange，提问作者lostinthejungle