如何去除切片影像之間的間距？-有解無憂

我在 Photoshop 中為電子郵件通訊制作了一張圖片，我將它們鏈接起來并托管了所有圖片。但是當我將它們粘貼到 gmail 中時，它們之間存在間距。如何去除間距？這是代碼。

https://s10.gifyu.com/images/image7af8bf1d86020f60.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Youtube Logo BW</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body bgcolor="#FFFFFF">
    <!-- Save for Web Slices (Youtube Logo BW.png) -->
    <table id="Table_01" width="1428" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <a href="https://youtube.com">
                    <img id="Youtubex20Logox20BW_01" src="https://s10.gifyu.com/images/Youtube-Logo-BW_01.png" width="1428" height="666" border="0" alt="" /></a></td>
        </tr>
        <tr>
            <td>
                <a href="https://youtube.com">
                    <img id="youtube" src="https://s10.gifyu.com/images/youtubec5155edec989e9ff.png" width="1428" height="499" border="0" alt="" /></a></td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
    </body>
    </html>

uj5u.com熱心網友回復：

https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ 此鏈接將詳細幫助您。

但我認為您應該對行內 css 使用 style 屬性。你不能在標簽中直接寫 bg-color 等。而是使用：

    <body style="bg-color:#FFFFFF;">
<!-- Save for Web Slices (Youtube Logo BW.png) -->
<table id="Table_01" style="width:1428; border=:0; cellpadding:0; cellspacing:0;>
    <tr>
        <td>
            <a href="https://youtube.com">
                <img id="Youtubex20Logox20BW_01" src="https://s10.gifyu.com/images/Youtube-Logo-BW_01.png" style="width:1428; height:666; border:none;" alt="" /></a></td>
    </tr>
    <tr>
        <td>
            <a href="https://youtube.com">
                <img id="youtube" src="https://s10.gifyu.com/images/youtubec5155edec989e9ff.png" style="width:1428; height:499; border:none;" alt="" /></a></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>

然后看看你得到了什么，因為我希望它能解決你的問題。如果您的問題仍然存在，請添加該問題的快照，因為我沒有完全理解您的要求。并嘗試使用 css 單位作為寬度和高度以獲得更好的結果。

uj5u.com熱心網友回復：

table {
border:0px;
border-collapse:collapse;
border-spacing:0px;
}
td a{
display: flex;
}
td,img { 
padding:0px; 
border-width:0px; 
margin:0px; 
}

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Youtube Logo BW</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (Youtube Logo BW.png) -->
<table id="Table_01" width="1428">
    <tr>
        <td>
            <a href="https://youtube.com">
                <img id="Youtubex20Logox20BW_01" src="https://s10.gifyu.com/images/Youtube-Logo-BW_01.png" width="1428" height="666" border="0" alt="" /></a></td>
    </tr>
    <tr>
        <td>
            <a href="https://youtube.com">
                <img id="youtube" src="https://s10.gifyu.com/images/youtubec5155edec989e9ff.png" width="1428" height="499" border="0" alt="" /></a></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381196.html

標籤：html css 电子邮件通讯

上一篇：HTML/CSS行距

下一篇：為什么我的網格內容沒有換行或顯示省略號？