img标签底部产生3-5像素间隙的原因以及解决方案

一个div标签中嵌套一个img，这个img标签下面会出现3-5像素的间隙

一：现象

二：产生原因

img属于行内块元素，div中的img的vertical-align默认属性是baseline

三：解决办法

3.1: 将img标签设置为块级元素

	 img {
	    display: block;
	 }

3.2: 设置图片的垂直对齐方式

   img {
      vertical-align: top/text-top/middle/bottom/text-bottom
   }

3.3: 改变父元素的宽和高属性

如果父对象的宽、高固定，图片大小随父对象而定，那么可以添加以下的一个属性来去掉图片下面的空间像素：

   div {
      width: 100px;
      height: 300px;
      overflow: hidden;
   }

3.4: 为img设置浮动

   img {
      float: left;
   }

3.5: 为父元素设置font-size: 0

  div {
    font-size: 0;
 }

3.6: 为父元素设置line-height: 0

  div {
  line-height: 0;
 }