CSS图片下面产生间隙的6种解决方案

在做网页前端开发,使用div+css排版时,浏览器中的图片元素img下出现多余空白的问题是很常见了,将padding,margin都设为0也没有任何效果,这对于前端小白刚开始是很懵逼的。这里介绍几种解决image图片布局下边的多余空隙BUG的常用方法,供大家参考。

方法1:将图片转换为块级对像

即,设置img为 display: block,即:

#box img { display: block; }

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

设置图片的 vertical-align 属性为「top,text-top,bottom,text-bottom」也可以解决。

#box img { vertical-align: top; }

方法3:设置父对象的文字大小为0px

设置 #box font-size 样式。

#box { font-size: 0; }

这种方式虽然可以解决问题,但会引发了新的问题,在父对像中的文字都无法显示。另外,父对象文字部分被子对像括起来,设置子对像文字大小虽然可以显示,但在CSS效验的时候会提示文字过小的错误。

方法4:改变父对象的属性

如果父对象的宽、高固定,图片大小随父对像而定,可以设置 overflow:hidden来解决。

#box { width: 100px; height: 50px; overflow: hidden; }

方法5:设置图片的浮动属性

#box img { float: left; }

如果要实现图文混排,这种方法是很好的选择。

方法6:删除图片标签和其父对象的最一个结束标签之间的空格

这个方法不推荐使用,因为在实际开发中为了让代码更体现语义和层次清晰,通常会使用IDE提供代码缩进功能,导致标签和其他标签换行显示,最终bug解决失败。

如需转载,请注明出处: https://www.chadou.me/p/222

你都看到这儿了,
领个红包再走吧。

最新发布