解决由标签空行而产生的间隙

两个div设置了display：inline-block所产生的问题

产生的间隙如图所示：

代码如下：

    <div class="box">
        <div class="img">
            <img src="gitar.jpg" alt="" width="200" height="160">
        </div>
        <div class="content">
            There is a gap between the picture and the text because there is a blank line between the labels
        </div>
    </div>
    <style>
    img{
        vertical-align: top;
    }
    .img{
        display: inline-block;
        width: 200px;
        height: 160px;
    }
    .content{
        display: inline-block;
        vertical-align: top;
        background: green;
        width: 200px;
        height: 160px;
    }
</style>

问题出现的原因：包裹图片的这个div和包裹文字的div之前存在空白字符（空行），所以导致了在页面中显示总是不能没有间隙。

---

方法一

将两个div之前的空格去掉，如下：

    <div class="box">
        <div class="img">
            <img src="gitar.jpg" alt="" width="200" height="160">
        </div><div class="content">
            There is a gap between the picture and the text because there is a blank line between the labels
        </div>
    </div>

这个方法毋庸置疑解决了问题，出现了我们想要的效果。但是这样的代码不规范，也不利于阅读，不推荐使用这种方法。但是如果情形没有其他合适的办法，这也是一种选择。

方法二

设置外层box这个div的font-size：0；然后在对有文字的div设置font-size：16px;如下所示：

    .content{
        display: inline-block;
        vertical-align: top;
        background: green;
        width: 200px;
        height: 160px;
        font-size: 16px;   // 增加的样式
    }
    .box{
        font-size: 0px;    // 增加的样式
    }

效果如下：

---

补充

当然如果对上述说到的两个（img和content）div采用float浮动布局，是不会产生间隙的。