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

时间:2024-04-06 14:01:45

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;”来解决。。