If you use any of the three major webmail clients (Hotmail/Outlook, Gmail, Yahoo) in any browser
other than Microsoft Internet Explorer, you’ve probably come across an email that appears to have
lots of gaps between the images.
In the email below, the image of the Houses of Parliament has been sliced up in order for text to be
inserted in two places. The image is then stitched together using several table rows. As you can see,
Gmail has inserted gaps between each row, breaking our image into several sections. The same thing
happens in Yahoo and Hotmail.
In order to remove these annoying gaps, we simply need to add a small bit of code to the image: style=”display: block”.[html]<img src=”image-url.jpg”; style=”display: block” />[/html]
Once that code has been added to the offending images, the email renders correctly.
Don’t be tempted to take the shortcut of adding the display: block CSS code to the head of your email:[html] <style type=”text/css”>
Firstly, some email clients will strip that away and the gaps will return. Secondly, there will be instances where you don’t want the display: block to be applied. If you have text running alongside an image in one table cell for example, the display: block would push the text underneath the image. It’s best to add the code to each individual image, that way it can be removed if necessary.