Question 49492 in Photoshop Question posted in
The official user guide can be found here.

How to remove spacing between sliced images? – Photoshop

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.

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

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0 
    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>
    Login or Signup to reply.
  3. 0

    This is basically due to the HTML5 doctype. When you send an email, most email clients (especially webmails) will only include content from inside the <body> of your HTML. This means your doctype is ignored and instead the doctype from the webmail applies. Most webmails (like Gmail desktop webmail, Outlook.com or Yahoo’s desktop webmail) use an HTML5 doctype nowadays.

    And the HTML5 doctype has an unexpected side effect on images that now have a spacing below them. You can see this in your code localy simply by changing the doctype to an HTML5 doctype.

    There are three different ways you fix this:

    1. Add vertical-align:middle in an inline style on the <img> element.
    2. Add display:block in an inline style on the <img> element.
    3. Add font-size:0 to the parent element of the <img>.

    I’d recommend using the first solution, which would give the following code:

    <!DOCTYPE html>
<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="" style="vertical-align:middle;" /></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="" style="vertical-align:middle;" /></a></td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
    </body>
    </html>

    If you want to learn more about this, here are two ressources I wrote that can interest you:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search