div包裹img底边会有几个像素的空白的问题

在写代码的时候经常遇到这样一个问题，如果div里嵌套一个img元素且div的高度是由img的高度来撑开，那么div的高度总会比img的高度多几个像素，如图1

这是图像的自然行为，因为img是内联元素，所以浏览器为下行字符留下一些空间。

为了理解刚刚发生的事情，我们来看一下线框的构造，线框内图像的放置以及线框在表格单元格中的放置。首先是一个包含文本的基本线框，如图2所示。

图2中最关键的部分是基线（用蓝线表示），以及它在线框内的位置。基线的确切位置取决于线框的“默认”字体（由红色框表示），由包含线框的元素的font-family的值确定。作者不可能直接改变基线的位置，所以它最终会在基线那里结束。基线以下的空间被称为“下降空间”，因为这是以“j”，“y”和“q”等小写字母的下划线绘制的地方。图3显示了当我们添加一个图像的混合时发生了什么。

注意图像在默认情况下的位置：其底边与线框的基线对齐。这个位置可以通过垂直对齐来改变- 我们稍后再来讨论一下 - 但是几乎没有人从默认值改变这个值。我们拿走文字，只留下图像，如图4所示。

所以我们有一个图像坐在只包含图像的线框的基线上。

怎么解决这个问题呢？

你可以设置img的CSS：

img {display:block; } or img {vertical-align:bottom; }

文本中的基线，底线，顶线，中线

注意：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。