图片下面4-5px的空白到底是怎么来的

起因呢，是上课的时候。老师的一个div嵌套img标签的小案例，图片底下居然多了一块大概4-5px的空白，让我顿时来了兴趣，咱们上图看。

这是一张250*250px的图片，外边包裹了一个浮动的div，并且设置了背景为红色。代码如下

因为外边的div并没有定高度，而其高度是由内部的img撑起来的。且其已经浮动，宽度已经包裹着图片，可是高度还多出来一块5px的细条。这让我心生疑窦，这5px是怎么来的呢。
当时老师给img元素设置了对其方式 vertical-align:bottom;这5px确实是没了，但是感觉更奇怪了。因为老师当时没有深入，可能是怕太深入我们理解不了。

但是好奇心爆棚的我，怎么能就此满足。当下就默默在心里记下，课后空闲百度查其缘由。果不其然，牵扯出来一系列的属性和作用机制。
首当其冲就是vertical-align的各个属性：baseline(默认)，top、bottom。。等等。我们来一张图具体解释一下这些属性。

这张图就详细的展示了，西文各个线所在的位置，而默认值又是baseline。所以一个大瓜出来了，原来这段留白，就是baseline到bottom之间的距离。所以老师设置的vertical-align:bottom才会有效果。但仅仅只有这一种方法吗。
第一种，最浅显的方式，更改对齐方式就是把vertical-align从默认改为bottom，或者top，这也是最容易理解的一种方式。
第二种，因为是对其方式上出的问题，我们直接给父元素的行高给干掉，自然而然就不会有这种问题，当然不推荐如此,因为会带来一些别的麻烦。

可以看出，把父元素行高干掉，也可以解决这个问题。
第三种，既然是因为图片是行内元素才导致的这个问题，我们直接给img的display改为block或者直接给图片加浮动（因为元素设置浮动以后，会转化为块级元素）

可以看到，有一样的效果。
好了，我们来总结一下：
因为img是inline元素，所以对齐方式和文字相仿。而文字默认的对齐方式是baseline，距离bottom还有一段距离，所以撑大外面盒子5px。当然这个5px距离要视字体不同而改变。只要是可以更改对齐方式，或者是让img不按文字来对齐，就不会出现这情况。推荐的方式就是设置vertical-align:bottom;，因为副作用小，容易理解。
好了，不知不觉已经11点了，困扰我一天的问题已经找到了答案，可以暂时睡个安稳觉了。但是牵出来更大的瓜，由于lineheight和vertical-align的机制非常的复杂，不是一时半会儿可以吃透的，就留给之后的时间慢慢研究吧。各位，晚安。
2.24 23时许