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


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

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

    Author:Marydon

    情景还原:

    <body>
        <div style="background: url(../images/bgImg2.jpg); 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); 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>

      效果展示:

      说明:白边是图片内容。

  • 相关阅读:
    js生成的字符串渲染到页面中如何添加换行符
    markdown文档插入emoji表情
    Notepad++ 运行.py文件
    git如何修改已提交的commit
    03_三维空间刚体运动(下)
    02_三维空间刚体运动(上)
    PointNet++: Deep Hierarchical Feature Learning on Point Sets in a Metric Space
    PointNet: Deep Learning on Point Sets for 3D Classification and Segmentation
    12_视觉里程计1_ICP算法
    安全计算环境(四)终端设备5
  • 原文地址:https://www.cnblogs.com/Marydon20170307/p/8523416.html
Copyright © 2020-2023  润新知