img放在a标签中图片底部出现多余空白解决无法占满的问题

img放在a标签中图片底部出现多余空白解决无法占满的问题

原因分析：

其实非常的基本，因为当初设立标准的不是亚洲而是欧洲，inline 元素为了正确的显示 y j g 等带有尾巴的英文字母，会在底下留空，这要依据 font-size 去决定。

解决问题有以下方法:

1、将图片转换为块级对象
设置img为“display:block;”。在CSS代码中添加：“ img {display:block;}”。

2、设置图片的垂直对齐方式
设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。在CSS代码中添加：“img {vertical-align:top;}”。

3、设置父对象的文字大小为0px
在嵌套图片的行内元素中加入：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

4、改变父对象的属性
如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置“overflow:hidden;”来解决。。