Remove spacing between table cells and rows

Add border-collapse: collapse into the style attribute value of the inner table element. You could alternatively add the attribute cellspacing=0 there, but then you would have a double border between the cells.

I.e.:

<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse">

It looks like the DOCTYPE is causing the image to display as an inline element. If I add display: block to the image, problem solved.


You have cellspacing="0" twice, try replacing the second one with cellpadding="0" instead.


I had a similar problem. This helps me across main email clients. Add:

  • attributes cellpadding="0", cellspacing="0" and border="0" to tables
  • style border-collapse: collapse; to tables
  • styles padding: 0; margin: 0; to each element
  • and styles font-size: 0px; line-height: 0px; to each element which is empty