Search code examples
htmlcsshtml-table

HTML Email : padding not working in gmail


<table>
  <tr>
    <td valign="top" align="center">
      <span style="color: black; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 8px; font-size: 35px;font-family: 'open sans', arial, sans-serif;">TIECON</span>
    </td>
  </tr>

  <tr>
    <td valign="top" align="center">
      <span style="color: black; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 8px; font-size: 35px;font-family: 'open sans', arial, sans-serif;">AHMEDABAD</span>
    </td>
  </tr>

  <tr>
    <td valign="top" align="center">
      <span style="color: black; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 8px; font-size: 35px;font-family: 'open sans', arial, sans-serif;">2016</span>
    </td>
  </tr>
</table>

I can see padding in browser but not in gmail.

 image with padding

image without padding in gmail

PS: As I am making HTML Emailer, I have to stick to table and inline css , only.

Thank You.


Solution

  • Try to using line-height:35px

    <table>
      <tr>
        <td valign="top" align="center">
          <span style="color: black; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 8px; font-size: 35px;font-family: 'open sans', arial, sans-serif; line-height:35px;">TIECON</span>
        </td>
      </tr>
    
      <tr>
        <td valign="top" align="center">
          <span style="color: black; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 8px; font-size: 35px;font-family: 'open sans', arial, sans-serif;line-height:35px;">AHMEDABAD</span>
        </td>
      </tr>
    
      <tr>
        <td valign="top" align="center">
          <span style="color: black; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 8px; font-size: 35px;font-family: 'open sans', arial, sans-serif;line-height:35px;">2016</span>
        </td>
      </tr>
    </table>