您的位置：首页 > 其它

td里面嵌套img标签后如何消除图片间隔

2018-03-07 16:47 399 查看
 

td里面嵌套image标签后如何消除图片间隔

CreateTime--2018年3月7日16:18:12

Author:Marydon

情景还原：

<body>
<div style="background: url(../images/bgImg2.jpg);width: 142px;">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td>
<a href="#" target="_blank" class="">
<img src="../images/6.png" width="112" height="78" title="第一张"/>
</a>
</td>
</tr>
<tr>
<td>
<a href="#" target="_blank" class="">
<img src="../images/9.png" width="112" height="78" title="第二张"/>
</a>
</td>
</tr>
<tr>
<td>
<a href="#" target="_blank" class="">
<img src="../images/14.png" width="112" height="78" title="第三张"/>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>

　　结果展示：图片之间有间隔

　　说明：图片高度为78px，但是td的高度为82px

　　尝试1

　　将table的高度改为：78*3=234px，经测试无效

　　尝试2

　　使用css样式，将td的高度统一修改为78px，td的高度仍然不变，还是82px，而且至少为82px，少于82px调整td无效。　　　

　　

　　解决方案：

　　在每个td里面再嵌套一个div，调整div的宽度为78px

<body>
<div style="background: url(../images/bgImg2.jpg);width: 142px;">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td>
<div>
<a href="#" target="_blank" class="">
<img src="../images/6.png" width="112" height="78" title="第一张"/>
</a>
</div>
</td>
</tr>
<tr>
<td>
<div>
<a href="#" target="_blank" class="">
<img src="../images/9.png" width="112" height="78" title="第二张"/>
</a>
</div>
</td>
</tr>
<tr>
<td>
<div>
<a href="#" target="_blank" class="">
<img src="../images/14.png" width="112" height="78" title="第三张"/>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<style type="text/css">
td div{
height:78px;
}
</style>

　　效果展示：

　　说明：白边是图片内容。

 

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航