img标签之图片三像素问题

问题产生的原因

图片是内联元素，内联元素的对齐方式是按照文字基线对齐（仔细观察下面图中的xyz）的，而不是文字底线对齐的，所以会出现空隙

解决方案

方法一：

在img标签中使用vertical-align可以让图片完整填充父级容器。

方法二： 

给img设置display: block;

<div>
	<img id="img" src="images/1.jpg" alt="" />
</div>
<div>
	<img src="images/1.jpg" alt="" />xyz
</div>

 

div{
	width: 300px;
	border: 1px solid red;
	margin-bottom: 10px;
	color: red;
	font-size: 20px;
	}
img{
	width: 200px;
}
#img{
	/* 方法一： */
	/*三个值任选一个皆有效*/
	/* vertical-align: middle; */
	/* vertical-align: top; */
	vertical-align: bottom;

	/* 方法二： */
	/* display: block; */
}