Strange gap at the bottom of every td element in a table [duplicate]-CodePudding

I am coding an email signature for a client that is quite complicated. I had it working for a while, but once the table is added to an HTML document, or it is added to an email, every td element leaves a tiny, 2px tall gap at the bottom and I can't figure out why.

I've tried removing padding from every element, setting border, cellspacing and cellpadding to zero and using border-collapse in all forms but it still remains. I've tested it on outlook and gmail

this is my code:

<table border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="padding: 0;">
        <table border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="padding: 0;"><img src="https://i.imgur.com/EEtSUAZ.png" alt=""></td>
              <td style="padding: 0;"><img src="https://i.imgur.com/oVtLVTQ.png" alt=""></td>
            </tr>
          </tbody>
        </table>
        <table border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="padding: 0;"><img src="https://i.imgur.com/FPEK7C5.png"></td>
              <td style="padding: 0;">
                <table border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr style="padding: 0px">
                      <td style="padding: 0px"><img style="padding: 0px" src="https://i.imgur.com/i6oxWv2.png" alt=""></td>
                    </tr>
                    <tr style="padding: 0;">
                      <td style="padding: 0;">
                        <img style="display: inline-block; padding: 0; " src="https://i.imgur.com/xls8Dzw.png" alt=""><img style="display: inline-block; padding: 0; " src="https://i.imgur.com/8LXaDm9.png" alt=""><img src="https://i.imgur.com/oNlsMC5.png"
                          alt=""><img style="display: inline-block; padding: 0; " src="https://i.imgur.com/As0jrfW.png" alt=""><img style="display: inline-block; padding: 0; " src="https://i.imgur.com/CYHdJvo.png" alt="">
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
        <table border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="padding: 0px;"><img src="https://i.imgur.com/6kRuewh.png"></td>
              <td style="padding: 0"><img src="https://i.imgur.com/udCX3oG.png"></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="padding: 0"><img src="https://i.imgur.com/JMKi3B4.png"></td>
      <td style="padding: 0;">
        <table border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="padding: 0;"><img style=" padding: 0;" src="https://i.imgur.com/E2VTXtu.png" alt=""></td>
            </tr>
            <tr>
              <td style="padding: 0; padding-top: 2px;"><img style="display: inline-block; padding: 0;" src="https://i.imgur.com/jHewI2N.png" alt="">
                <p style="display: inline-block; margin: 0px; font-size: 12px"> 27 67 470 1707</p>
              </td>
            </tr>

            <tr>
              <td style="padding: 0; font-size: 12px"><img style="display: inline; padding: 0;" src="https://i.imgur.com/OHv1pLT.png" alt="">
                <p style="display: inline-block; margin: 0px;">www.talent10.com<br>[email protected]</p>
              </td>
            </tr>

            <tr>
              <td style="padding: 0; padding-bottom: 2px; font-size: 12px">
                <img style="display: inline-block; padding: 0;" src="https://i.imgur.com/j7GoHc4.png" alt="">
                <p style="display: inline-block; margin: 0px;">Maxwell Office Park, Building 1,<br>Magwa Cres, Waterval City</p>
              </td>
            </tr>
            <tr>
              <td style="padding: 0;"><img src="https://i.imgur.com/PwXiL1L.png" alt=""></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="padding: 0;">
        <img style="display: inline-block; padding: 0;" src="https://i.imgur.com/iXbYCq9.png" alt="">
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Use font-size: 0px; line-height: 0px; style for <td> to prevent extra gap (instead of padding: 0:). It is required to use exactly 0px, not just 0.
Remove spaces and new line symbols between HTML tags inside table cells to prevent extra spaces between blocks with display: inline-block.
Simplify the table structure.
Use the same styles for the same tags with the same role ;)

So I don't see any extra spaces now. However, the column with contact information has become too low. But this is the next task.

<table border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="font-size: 0px; line-height: 0px;">
        <table border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/EEtSUAZ.png" alt=""></td>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/oVtLVTQ.png" alt=""></td>
            </tr>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/FPEK7C5.png"></td>
              <td style="font-size: 0px; line-height: 0px;">
                <table border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr>
                      <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/i6oxWv2.png" alt=""></td>
                    </tr>
                    <tr>
                      <td style="font-size: 0px; line-height: 0px;"><img style="display: inline-block;" src="https://i.imgur.com/xls8Dzw.png" alt=""><img style="display: inline-block;" src="https://i.imgur.com/8LXaDm9.png" alt=""><img src="https://i.imgur.com/oNlsMC5.png" alt=""><img style="display: inline-block;" src="https://i.imgur.com/As0jrfW.png" alt=""><img style="display: inline-block;" src="https://i.imgur.com/CYHdJvo.png" alt=""></td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/6kRuewh.png"></td>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/udCX3oG.png"></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="font-size: 0px; line-height: 0px"><img src="https://i.imgur.com/JMKi3B4.png"></td>
      <td style="font-size: 0px; line-height: 0px;">
        <table border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/E2VTXtu.png" alt=""></td>
            </tr>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img style="display: inline-block; vertical-align: middle; font-size: 0px; line-height: 0px;" src="https://i.imgur.com/jHewI2N.png" alt=""><p style="display: inline-block; vertical-align: middle; margin: 0px; font-size: 12px; line-height: 12px;"> 27 67 470 1707</p></td>
            </tr>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img style="display: inline-block; vertical-align: middle; font-size: 0px; line-height: 0px;" src="https://i.imgur.com/OHv1pLT.png" alt=""><p style="display: inline-block; vertical-align: middle; margin: 0px; font-size: 12px; line-height: 12px;">www.talent10.com<br>[email protected]</p></td>
            </tr>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img style="display: inline-block; vertical-align: middle; font-size: 0px; line-height: 0px;" src="https://i.imgur.com/j7GoHc4.png" alt=""><p style="display: inline-block; vertical-align: middle; margin: 0px; font-size: 12px; line-height: 12px;">Maxwell Office Park, Building 1,<br>Magwa Cres, Waterval City</p></td>
            </tr>
            <tr>
              <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/PwXiL1L.png" alt=""></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="font-size: 0px; line-height: 0px;"><img src="https://i.imgur.com/iXbYCq9.png" alt=""></td>
    </tr>
  </tbody>
</table>