消除img标签中图片底部的间隙

问题：

在一个包含容器中（如div、p等标签中）放置一张图片，图片底部与容器底部会出现一些间隙，如下图在Chrome浏览器中有4px的间隙，why？

 

原因：

这是因为图片在容器中是通过基线（baseline）对其的，如果我们在图片后面添加一些文本，就可以很容易发现 图片底部和文本基线对其。

解决方案：

1.设置img{display: block;}，即将img标签设置为块状元素------无基线对齐。

2. 设置img{virtical-align: bottom;}------图片底线对齐。（经测试，设置为top|bottom|text-top|text-bottom|middle均能达到效果）

3.设置容器的行高足够小，如.box{line-height: 0;}-------使得基线位置上移。

note：line-height相关应用（来源：慕课网）

（1）大小不一的图片在容器中水平垂直居中的方法（近似居中-----vertical-align:middle;不是绝对居中，而是基线往上1/2X高度，不同字体基线不同）(IE8+ )

<style>
.box {
	line-height:200px;
	text-align:center;
	background:#eee;
}
.box>img{vertical-align:middle;}
</style>
<div class="box">
	<img src="1.jpg">
</div>

（2）多行文本垂直居中（近似居中）(IE8+ )

<style>
.box {
	line-height:200px;
	text-align:center;
	background:#eee;
}
.box>.text{
	display:inline-block;
	line-height:normal;
	text-align:left;
	vertical-align:middle;
}
</style>
<div class="box">
	<div class="text">多行文字水平垂直居中实现的原理跟图片水平垂直居中是一样的，区别在于要把多行文本所在的容器的display水平转换成和图片一样，也就是inline-block，以及重置外部继承的text-align和line-height属性值。</div>
</div>

（单行文本垂直居中，设置line-height）