How to remove spacing between sliced images?-CodePudding

I made an image in Photoshop for an email newsletter, I linked them and also host all the images. But when I paste them in gmail there is a spacing between them. How do I remove the spacing? Here are the codes.

<!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>

CodePudding user response：

https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ this link will help you in detail.

But I think you should use style attribute for inline css. you can't write directly bg-color etc in tags. instead use:

    <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>

And then see what you get because I hope it will solve your problem. If your problem still remain then add a snapshot of that problem because I did'nt get exactly what you are asking for. and also try to use css units for width and height to get better results.

CodePudding user response：

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>