一、问题
html进行网页结构的构建时，经常在div中插入img标签展示图片，如果div具有边框，就会发现img和div之间存在一定的间距，但当前的div的height属性并没有设置的比img大。
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="index.css"> 7 </head> 8 <body> 9 <div class="div-box">Girl<img class="pic" src="girl.jpg" /></div> 10 </body> 11 </html>
尝试了使用了Chrome，Firefox，ie浏览器，均有这个问题，以下为Chrome显示的效果：
可以明显的看到，图片与div之间存在间距。
二、分析与解决办法
当块级元素包含内联元素时，内联元素默认是和块元素的基线baseline对齐的，比如例子中的文字“Girl”和图片img均默认的和div的基线对齐，而基线距离块元素边框默认的情况下是具有一定的距离的，从而会产生间距。根据产生的原因，可以有以下三种解决办法：
1. 块元素font-size: 0 或 line-height: 0
基线距离块元素的距离与font的位置和font（font-family,font-size）有关，当把父元素的font-size或line-height设置为0时，基线距离块元素的距离就也变为0，自然就消除了间距。
注：如何父级中含有文字，将font-size设置为0会导致文字无法显示，要换用其他解决办法。
2.内联元素重新设置vertical-align
vertical-align的值除了设置为baseline，主要还有以下几种：sub|super|top|text-top|middle|bottom|text-bottom。其中super, sub是垂直对齐文本的上下标的，text-top和text-bottom是与父元素字体的顶端或底端对齐，这四个不能用于消除间距。top, middle和bottom均可以使用，只是文字和图片的相对位置产生不同，结果如下图：
top: middle: bottom:
注：将vertical-align设置成top,middle,bottom中的哪一个，还是根据html的具体结构来进行，通常情况下使用bottom。
3.内联元素display: block
将img的display设置为块显示，自然不会存在行内对齐的问题，就不会出现间距了。