网页制作中，不管是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
微信扫一扫 
支付宝扫一扫