display: inline-block and responsive

Thanks to «media queries», it's easy to change the appearance of an email based on the screen resolution. For example, you can use two blocks that will be side-by-side on a «Desktop» resolution and one below the other on a «Mobile» resolution. To do this, you need to use «DIV» elements and the «display» property with the value «inline-block».

In theory, it's easy, but I still ran into a problem. On some email clients, my blocks were stacking one below the other, even though there was enough space for them to sit side-by-side.

After some research, I finally found the reason and, more importantly, a solution, so I'm sharing it with you in this article.

The behaviour of «inline-block» is the cause

This poor placement is explained by the unintended interpretation of superfluous spaces. «inline-block» changes the default value of a «DIV» element (namely «block») to the value «inline». One of the characteristics of «inline» is that it respects all spaces in the HTML code, and it is therefore the spaces between «inline-block» elements that create this unwanted rendering issue.

font-size:0 and removal of spaces

I have tried two solutions to correct this phenomenon.

The first method is to modify the «font-size» style of the element containing the «inline-block» blocks. In an «inline» element, the «font-size» style defines the size of the spaces, so you just need to set this style to «0» in the parent block. Then, you just need to specify the correct «font-size» value in each of the 'DIV' elements.

 <td width="700" align="center" style="font-size: 0;"
The second solution is to paste the different HTML tags to remove these superfluous spaces.

 <td width="700" align="center" style="font-size: 0;"
 

 

 

 
 

     BLOCK 1
 

 

 <div style="width:350px; height:494px; display: inline-block; padding:0;">
     BLOC 2