解决网页中img图片出现多余空白的方案

网页制作中,不管是table还是DIV+CSS排版时,会遇到浏览器中的图片元素img下出现多余空白的问题,非常常见,如何解决?

解决网页中img图片出现多余空白的方案

<table class="w1024" border="0" cellspacing="0" cellpadding="0">
         <tr>
        <td colspan="3">
                   <img src="img/top1.jpg" >
                   <img src="img/top2.jpg" >
                   <img src="img/top3.jpg" >
                   <img src="img/top4.jpg" >
        </td>
      </tr>
</table>

解决方法:

1、将图片转换为块级对象

设置img为“display:block;”。

.w1024 img{  display:block}

不同情况,解决方法也不同。

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

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

.w1024 img{  vertical-align: top;}

3、设置为背景图片

将每张图片设置为一个div或表格的一行的背景图片,设置div高度或单元格高度为图片高度。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5777.html

(1)
上一篇 2020年4月14日 上午9:20
下一篇 2020年4月18日 下午3:49

99%的人还看了以下文章

发表回复

登录后才能评论