title: HTML email Outlook images display inline block
body: <p>I am having an issue with keeping 2 images on the header of an email as display:inline-block i need the 2 images to "touch" each other so there isn't the white gap between them like the screen shot below. It would be great it it could be 1 image but they are both linking to different urls. </p>
  
  <p>Here is the code for this TD. Ohhh of course this is responsive as well :)</p>
  
  <pre><code>&lt;td&gt;
    &lt;!--[if (gte mso 9)|(IE)]&gt;
    &lt;table width="258" align="left" cellpadding="0" cellspacing="0" border="0"&gt;
      &lt;tr&gt;
        &lt;td&gt;
    &lt;![endif]--&gt;
    &lt;table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="content" style="width:100%;max-width:258px;"&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;a href="#"&gt;&lt;img alt="" src="header-l.png" style="width:100%;max-width:258px;border:0;display:block;" /&gt;&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;!--[if (gte mso 9)|(IE)]&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
    &lt;![endif]--&gt;
    &lt;!--[if (gte mso 9)|(IE)]&gt;
    &lt;table width="258" align="left" cellpadding="0" cellspacing="0" border="0"&gt;
      &lt;tr&gt;
        &lt;td&gt;
    &lt;![endif]--&gt;
    &lt;table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="content" style="width:100%;max-width:258px;"&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;a href="#"&gt;&lt;img alt="" src="header-r.png" style="width:100%;max-width:258px;border:0;display:block;" /&gt;&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;!--[if (gte mso 9)|(IE)]&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
    &lt;![endif]--&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>I also have these styles in the header... When i added this "mso-table-lspace:0;mso-table-rspace:0;" to the table it slimmed up the LARGE gap that was there but still have like a 2px gap between them. </p>
  
  <pre><code>.content {width: 100%; max-width: 516px;}
  table {border-collapse: collapse;table-layout: fixed;margin:0 auto;mso-table-lspace:0;mso-table-rspace:0;}
  table table table {table-layout: auto;}
  table table {table-layout: auto;}
  </code></pre>
  
  <p>Willing to try any suggestions!</p>
  
  <p><img src="https://i.stack.imgur.com/szkqp.png" alt="enter image description here"></p>