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字符串