如何实现两张图片无间距并排？宽度设置问题排查

你遇到的这个问题其实很常见，核心原因是图片标签之间的空白字符在搞鬼！

当你把两个<img>标签分开写的时候，它们之间的换行、空格会被浏览器解析成一个普通的空格字符。这个空格虽然看起来不起眼，但它是有宽度的——相当于父容器字体大小下的一个空格宽度。你给每张图设了width: 50%，两个加起来刚好是100%，但加上这个额外的空格宽度，总宽度就超过了父容器的100%，浏览器只能把第二张图挤到下一行，变成堆叠的样子。

至于你说的display: inline-block无效，是因为inline-block元素同样会受到空白字符的影响，这个空格依然会占据宽度，所以还是会超出。

下面给你几种可行的解决方法：

方法1：移除HTML中的空白字符 #

直接把两个<img>标签写在同一行，或者用注释消除中间的空白：

<!-- 写法1：同一行 -->
<div>
  <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /><img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</div>

<!-- 写法2：用注释分隔 -->
<div>
  <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /><!--
  --><img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</div>

方法2：给父容器设置font-size: 0 #

空白字符的大小由父容器的字体大小决定，把父容器的font-size设为0，空格就会消失，之后如果需要在父容器里放文字，再单独给文字设置字体大小即可：

div {
  width: 500px;
  font-size: 0; /* 消除空白字符宽度 */
}
img {
  width: 50%;
}

方法3：使用Flexbox布局（推荐） #

Flexbox是现代布局方案，能轻松解决这类排版问题，父容器设置display: flex后，子元素会自动填充空间，并且忽略空白字符：

div {
  width: 500px;
  display: flex;
}
img {
  width: 50%;
}

方法4：使用Grid布局 #

Grid布局同样适合这种等分场景，直接给父容器设置两列等分：

div {
  width: 500px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列各占一份 */
}
img {
  width: 100%; /* 图片占满列宽 */
}

这样处理后，两张图片就能完美并排，占满父容器宽度且没有间距啦！

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