解决 img 标签间的空隙问题

前言

笔者最近在开发过程中遇到一个有意思的问题。如果把一张图片，按照九宫格的方式分成9张小图，再用代码把它们拼接成一张大图的时候，水平方向和垂直方向都会出现空隙。下面来分析一下空隙产生的原因及其解决方法。

原始 HTML 代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>解决 img 标签间的空隙问题</title>
</head>
<body>
  <div>
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
  </div>
  <div>
    <img src="4.jpg">
    <img src="5.jpg">
    <img src="6.jpg">
  </div>
  <div>
    <img src="7.jpg">
    <img src="8.jpg">
    <img src="9.jpg">
  </div>
</body>
</html>

Chrome 浏览器呈现效果如下：

可以很明显的看见，每张图片之间都产生了空隙。而水平方向和垂直方向上出现空隙的原因是不一样的，下面分别讨论。

水平方向的空隙

水平方向之所以出现空隙，是因为不同 img 标签之间有回车换行符/空格，它们会在页面上展示出来。所以解决办法就是把相邻的 img 标签紧挨着写不换行也不加空格，或者把回车换行符/空格注释掉。

修改后的代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>解决 img 标签间的空隙问题</title>
</head>
<body>
  <div>
    <!-- 相邻的 img 标签紧挨着写 -->
    <img src="1.jpg"><img src="2.jpg"><img src="3.jpg">
  </div>
  <div>
    <!-- 把回车换行符注释掉 -->
    <img src="4.jpg"><!--
 --><img src="5.jpg"><!--
 --><img src="6.jpg">
  </div>
  <div>
    <img src="7.jpg"><!--
 --><img src="8.jpg"><!--
 --><img src="9.jpg">
  </div>
</body>
</html>

这时 Chrome 浏览器呈现的效果图如下：

垂直方向的空隙

垂直方向之所以出现空隙，是因为 img 标签是行内（inline）元素，而行内元素的 verticle-align 默认是和父元素的 baseline 对齐的，而 baseline 又与父元素底边有一定距离。在本文的栗子中，具体体现为 img 元素与父级 div 元素的底边有空隙，所以视觉上图片出现了垂直方向的空隙。

关于行内元素的对齐方式，可以参看这里与这里。

找到了原因，就能很快的解决问题了。主要解决方案有3种：

设置 img 元素的对齐方式，vertical-align: bottom, vertical-align: center, vertical-align: top，都可以。
设置容器的字体大小为0，div { font-size: 0 }。
把 img 元素设置为块级元素， display: block。

在本文的栗子中，每个 div 里还有三张图片需要水平排列，所以如果使用方案三把 img 变为块级元素后，还需要设置浮动，使用方案一及方案二则不需要特殊处理。

修改后的代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>解决 img 标签间的空隙问题</title>
  <style type="text/css">
    /*解决方案1*/
    .solution1 img {
      vertical-align: bottom;
    }
    /*解决方案2*/
    .solution2 {
      font-size: 0;
    }
    /*解决方案3*/
    .solution3 img {
      display: block;
      float: left;
    }
  </style>
</head>
<body>
  <div class="solution1">
    <img src="1.jpg"><img src="2.jpg"><img src="3.jpg">
  </div>
  <div class="solution2">
    <img src="4.jpg"><!--
 --><img src="5.jpg"><!--
 --><img src="6.jpg">
  </div>
  <div class="solution3">
    <img src="7.jpg"><!--
 --><img src="8.jpg"><!--
 --><img src="9.jpg">
  </div>
</body>
</html>

Chrome 浏览器最终呈现效果如下：

结语

现在，就可以愉快的与九宫格形式组成的大图片愉快的玩耍啦。