display: inline-block et responsive

Grâce aux « media queries », il est facile de modifier l’apparence d’un email en fonction de la résolution de l’écran. Par exemple, on peut jouer avec deux blocs qui seront côte-à-côte sur une résolution « Desktop » et l’un en dessous de l’autre sur une résolution « Mobile ». Pour cela il faut utiliser des éléments « DIV » et la propriété « display » avec la valeur « inline-block ».

responsive

En théorie, c’est facile mais j’ai tout de même été confronté à un problème. Sur certains outils de messagerie, mes blocs se plaçaient l’un en dessous de l’autre alors qu’ils avaient assez de place pour rester l’un à côté de l’autre.

Après quelques recherches, j’ai fini par trouver la raison et surtout une solution donc je vous la partage dans cet article.

Le comportement du « inline-block » en cause

Ce mauvais placement s’explique par l’interprétation non souhaitée d’espaces superflus. « inline-block » modifie la valeur par défaut de l’élément « DIV » (à savoir « block ») par la valeur « inline ». Une des caractéristiques de « inline » est qu’il respecte tous les espaces dans le code HTML et ceux sont donc les espaces entre les éléments « inline-block » qui créés ce souci de rendu non voulu.

font-size:0 et suppression des espaces

J’ai conjugué deux solutions pour corriger ce phénomène.

La première consiste à modifier le style « font-size » de l’élément qui contient les blocs « inline-block ». Dans un élément « inline », le style « font-size » définit la taille des espaces donc il suffit de mettre ce style à la valeur 0 dans le bloc parent. Ensuite il faut juste spécifier la bonne valeur « font-size » dans chacun des éléments « DIV ».

<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" style="display: block; max-width:700px;" class="w">
 <tr>
 <td width="700" align="center" style="font-size: 0;">
<!-- Les blocs "inline-block" -->
 </td>
 </tr>
 </table>

La seconde solution est de coller les différents tags HTML pour supprimer ces espaces superflus.

<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" style="display: block; max-width:700px;" class="w">
 <tr>
 <td width="700" align="center" style="font-size: 0;">
 <!--[if (gte mso 9)|(IE)]>
 <table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td align="right">
 <![endif]-->
 <div style="width:350px; display: inline-block; padding:0;">
     BLOC 1
 </div><!-- Espaces supprimés --><!--[if (gte mso 9)|(IE)]>
 </td><td align="left">
 <![endif]--><!-- Espaces supprimés --><div style="width:350px; height:494px; display: inline-block; padding:0;">
     BLOC 2
 </div>
 <!--[if (gte mso 9)|(IE)]>
 </td>
 </tr>
 </table>
 <![endif]-->
 </td>
 </tr>
 </table>

J’espère que ces explications pourront vous aider.


L’article ne répond pas à toutes vos questions ? N’hésitez pas à nous contacter pour avoir plus d’informations.


Romain Didier

Twitter : @RomainDidier


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Le temps imparti est dépassé. Merci de recharger le CAPTCHA.