UI Development

Extra gap issue between image and td of the table in outlook

The blog is about..?

Here in this blog,  we are discussing the space between the small image carrot-blue and row since there should not be any gap between them:

 

Here the current image having a height = “12px” and also  mentioned valign = “top” 

<!--[if mso]>
    <tr>
      <td bgcolor="fff" align="center" valign="top" colspan="2" width="100%">
	<img src="https://random.blob.core.windows.net/media/images/carrot-blue-28*12.png" width="28" height="12" alt=""/>
	</td>
     </tr>
 <![endif]-->

 

Here Both valign and its respective height are not supporting in respective outlooks.

Solution:

<!--[if mso]>
    <tr>
      <td bgcolor="fff" align="center" valign="top" colspan="2" width="100%">
	<img src="https://random.blob.core.windows.net/media/images/carrot-blue-28*12.png" width="28" height="18" alt=""/>
	</td>
     </tr>
 <![endif]-->

 

Description:

Increase the height so that it touches the upper ‘tr’, Here the current image having a height = “18px” and it won’t disturb other devices since it will be written in outlook code

And finally your output will be as follows :

About The Author

Leave a Reply

*