img的间隙

*{
    padding: 0px;
    margin: 0px;
}
.test{
    border: 1px solid red;
    width: 600px;
}
<div class="test">
    <img src="test.jpg" />
</div>

上述代码产生的效果如图所示，可是另人感到惊奇的是，img与div之间存在着一个间隙，这个间隙是怎么产生的？应该怎么解决？下面咱们一点点的探寻这个问题背后的一些原理：

问题产生：

这个问题产生主要是因为baseline形成的，先来了解下baseline，这是一个在英文的文字排版中体现比较明显的概念：

baseline只是在内联元素中才有的概念，在块元素中并无这种概念，也就是说只有在ifc下才会有这一律念，而且内联元素的vertical-align的默认值就为baseline，也就是根据基线对齐。
对应着baseline还有两条标准线，分别为bottom和top，下面这张图说明了三条线所处的位置：

img是一内联元素，其根据baseline对齐，那条间隙就是baseline到bottom的距离，既然如今问题搞清楚了，下面就来解决它：

解决问题：

解决这个问题有4种方法（欢迎你们补充，我只想到这4种）：

• line-height
  给div.test添加样式line-height: 0px;就能够解决这个问题，这个原理很简单，由于line-height指的是bottom到top的距离，将其设置为0也就是表明着baseline与bottom之间的距离为0，天然那条间隙就消失啦；同理咱们能够得出的就是指定font-size: 0px;也是能够解决，由于line-height在不指定时值默认为font-size * 一个系数(1.2 or other)，可是这种状况下不能有文字出现。

• img变成块元素
  文章前部分讲到了baseline只是对于内联元素而言，本身的给img添加样式display: block;将其转为块元素天然间隙就会消失，不过这样也会产生一些反作用。

• 给div.test添加height
  这种方式比较简单那就让div.test只有图片那么高，这样也会有反作用，文字可能会移除，就像下图这样：

• 改变vertical-align
  改变垂直对齐方式，好比指定vertical-align: bottomorvertical-align: toporvertical-align: middle，能够很完美的解决这个问题，可是产生的效果值得让人琢磨一番，下面就来解读下：

理解vertical-align

先来改下最开始的代码：

*{
    padding: 0px;
    margin: 0px;
    font-size: 24px;
}
.test{
    border: 1px solid red;
    width: 600px;
    margin: 10px 200px;
}
.test img{
    vertical-align: top;
}
<div class="test">
    <img src="test.jpg" />
    <span>zp1996<span>
</div>

效果如上图所示，能够发现的文字怎么跑到了上面去，这是什么鬼？只是改变了img的垂直对齐方式为何会影响到span呢？
其实须要明白的是，不是img上去了，而是下去了，来分解下步骤解释下这个理论：

第一步就是造成上图这样的效果，第二步就是给div.test添加一个img标签，而且以top先对齐，因此就会产生有蜡笔小新的那个效果。
可是和实验室学长讨论时，学长说这个过程不符合dom顺序编译造成树的流程啊，一想对啊，难道不是这样吗？诶不对啊，img是置换元素，它须要依赖其src属性啊，而图片加载的过程会比较慢，不能等着加载图片而不去编译后面的代码吧，确定是用异步加载的吧，这么想下上面拆分的那个过程是对的啊！到底浏览器真实的是否是这样的呢不得而知，可是从效果来看应该是这样的。

注: 这只是我的的一些想法，若有不对，欢迎指出