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

江山如画 • 2020年4月16日 pm7:14 • 网页制作 • 阅读 228

网页制作中，不管是table还是DIV+CSS排版时，会遇到浏览器中的图片元素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

CSS 网页布局

赞 (1)

微信扫一扫

微信扫一扫

支付宝扫一扫

支付宝扫一扫

高等学校机械工程学科虚拟仿真实验教学共享平台免费开放使用通知

« 上一篇 2020年4月14日 am9:20

山东省第六届“超星杯”高校教师教学比赛实施方案 ——高校教师信息化教学比赛

下一篇 » 2020年4月18日 pm3:49