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>

　　效果展示：

　　说明：白边是图片内容。

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 标签里面直接嵌套图片，下面出现一小段空白的原因 css 图片有间隔多个Img标签之间的间隙关于li标签之间的间隔如何消除！下载img标签里面的图片 JS代码 p标签里面不能嵌套div 用js动态的改变img标签里面的src属性实现图片的循环切换 img标签设置默认图片 img标签设置默认图片微信中的chooseImage接口得到localId后无法通过img标签显示图片 img标签显示图片转换后的base64字符串