Recent there was a hot discussion on Litmus community.
Basically, you will always see a gap under each image like below.
There are a lot of fixes to remove the unwanted gap. But I would like to go a little deep on why we are seeing these gaps. Click here to skip the craps and go to the fixes I recommended.
To explain this, first we need to take a look what happened to our email code. Below we have two screenshots 1st one is for image with link and the 2nd one is for image only. Both a placed directly under <td>.
As you may noticed, image with link is forced to be inserted a <div style="display: inline-block;"> between <a> and <img>. And image without link has an extra <button> tag.
Thus, everything under <td> was forced to be an inline element (inline and inline-block are both inline element). So inline elements will be always aligned to the baseline of a line by default.
Here's a demo for explaining how it's aligned.
So inline elements are always aligned on baseline. Thus you can see the gap between the baseline and bottom line. And if you pay attention to the third example, if the line-height (font-size) is much larger than the image, there will be a gap between the top line and your image. It's all because how inline elements act in a line.
So all the fixes are aim to make that inline-block <div> to be block, or change the vertical-align to bottom when images is higher than the line height.
So the fixes will be:
``` div, button{ display: block !important; } ``` *This fix has `!important` so it will force all your div and button to be block element. Make sure that your specific div won't be affected. Feel free to use class to apply this style wherever you need.*or
div, button{
vertical-align: bottom;
}
This fix don't have !important. So it's safe, but make sure your image is high enough so that there won't have gap above your image. Feel free to use class to apply this style wherever you need.
Maybe you will noticed that in the right side of the screenshot, those inline elements are set with 15px font-size by Outlook.com by default. So your image should be better larger than 20px.
Feel free to reach out to me if you have any question. I'll be very happy to answer that.