博客标题想了好久，还是没办法言简意赅地表达出我要说什么，所以直接上一张图吧，一看就知道了。
嗯对，就是这个空隙！一个div里除了这张图片什么都没有，为什么会有这个空隙呢？
在看这个问题之前，我们需要了解关于行内框盒子模型的相关概念，理解了这些概念，自然就知道问题的答案了。
文章结构：
-
行内框盒子模型
- content-area
- inline boxes
- line boxes
- containing box
- 图片下方为什么会有空隙？
- 怎样去掉这个空隙？
一、行内框盒子模型
首先分别来讲四个概念：内容区域content-area、内联盒子inline boxes、行框盒子line boxes、包含盒子containing box。
1、content-area
content-area是一种围绕文字的看不见的盒子，其大小与font-size的大小有关，与line-height无关。
2、inline boxes
inline-boxes使文字排成一行，而非成块显示。如<span>就是一个内联盒子。如果没有内联标签，则属于“匿名内联盒子”，如下图：
3、line boxes
每一行都是一个行框盒子，每个行框盒子都是由一个个内联盒子组成。
4、containing box
包含盒子由一个个行框盒子组成。
一张图来说明上述概念：
那么，每个line boxes的高度是怎样确定的呢？
由图可知：内容区域高度 + 行间距 = 行高。行高决定内联盒子的高度，行间距可大可小（甚至可为负值）；当行间距为负值时，说明行高的高度小于内容区域高度，就会使上下文字发生重叠。
二、图片下方为什么会有空隙？
我们举一个简单的例子，代码如下：
// html
<body>
<div class='wrapper'>
xxyy
</div>
</body>
// css
.wrapper{
border:1px solid;
width:500px;
margin:10px auto;
font-size:30px;
}
.wrapper>img{
width:300px;
}
结果：
上图红色的那根线就是文字的基线，字母 x 的底部刚好在基线上（基线：小写字母 x 的底部）。line boxes中的vertical-align默认基线对齐，而图片作为其中的一个inline boxes元素，同样也是基线对齐，所以会出现上图的结果。
现在我们把上图的 ‘xxyy’ 去掉，结果如下：
这个空隙仍然存在。我们可以理解为在图片前面或者后面有一个看不见的文本节点与图片基线对齐，所以不管div中是否有文本，图片下面总是有一个空隙。
总结：图片下面的空隙是由于图片默认基线对齐造成的。
三、怎样去掉这个空隙？
通过上面的内容，我们知道：图片下面的空隙是由于图片默认基线对齐造成的。
想要去掉这个空隙，最简单的方法就是改变图片的对齐方式。修改img部分CSS如下：
.wrapper>img{
width:300px;
vertical-align:bottom;
}
结果：
咦？为什么要设置vertical-align为bottom，而不设置为top/middle呢？
这都是根据自己的应用场景来说的，现在我们在父div里添加一行文字，如果设置“vertical-align:bottom”：
设置“vertical-align:top”：
设置“vertical-align:middle”：
还有两种方法可以去掉图片下面的间隙：
- 图片块状化（块状元素不存在基线对齐）：
img{
display:block;
}
- 行高足够小，使基线位置上移：
.parent{
line-height:0;
}
每种方法都有不同的应用场景，大家可以按需选择。
终于写完了，一旦涉及到line-height和vertical-align，CSS就会变得很复杂。这一部分目前只能理解这么多了，如有错误，烦请指正！
参考资料：
1、张鑫旭老师CSS深入理解之line-height
2、深入理解 CSS：字体度量、line-height 和 vertical-align
网友评论