Padding and margin on outlook | XM Community
Skip to main content
Hi everyone,

I am creating a HTML email template. This one looks good when I see it on Qualtrics but when I want to test it on outlook or gmail, the container is not center.



Here an example :

!



Someone can help me please ?
Post the html.
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">

<tbody>

<tr>

<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>

<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">

<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">

<div style="text-align: center;"><img height="106" src="https://nexity.co1.qualtrics.com/CP/Graphic.php?IM=IM_3BQfZCpysmqOZzD" style="width: 300px; float: center; height: 106px;" width="300" /></div>



<table align="center" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 10px;">



<tbody>

<tr>

<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">

<tbody>

<tr>

<td style="font-family: sans-serif; vertical-align: top;">

<p style="font-size: 14px; font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px;"><span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;">Bonjour,</span></span></p>



<p style="font-size: 14px; font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px;"><span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;"><strong>Félicitations !</strong> Vous venez de devenir propriétaire et nous vous remercions de votre confiance. Nous savons à quel point c’est un moment important dans votre vie.<br />

 </span></span><br />

<span style="font-size:11.0pt"><span style="font-family:Calibri"><span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;">Votre satisfaction est au centre de nos préoccupations. C'est pourquoi nous vous proposons de répondre à quelques questions pour améliorer nos services</span></span>.</span></span></p>



<p style="font-size: 14px; font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px; text-align: center;"><strong><span style="font-size:11.0pt"><span style="font-family:Calibri"><span style="font-size:16px;"><span style="font-family:Arial,Helvetica,sans-serif;">Dites-nous tout en moins d'une minute !</span></span></span></span></strong></p>

</td>

</tr>

<tr>

<td align="center">

<table bgcolor="#C52A30" border="0" cellpadding="0" cellspacing="0" class="mb" width="336">

<tbody>

<tr>

<td align="center">

<table border="0" cellpadding="0" cellspacing="0" draggable="true" width="100%">

<tbody>

<tr>

<td style="line-height:1px;font-size:1px;" width="10"><img alt="" height="10" src="http://nexity.emsecure.net/images/SIP/Template_LDM/ctatopleft.jpg" width="10" /></td>

<td align="right" style="line-height:1px;font-size:1px;"><img alt="" height="10" src="http://nexity.emsecure.net/images/SIP/Template_LDM/ctatopright.jpg" width="10" /></td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

<td align="center" style="vertical-align:middle;"><strong>${l://SurveyLink?d=<span style="font-family:Arial,Helvetica,sans-serif; font-size:16px; color:#ffffff; text-decoration: none;">Je donne mon avis</span>}</strong></td>

</tr>

<tr>

<td>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tbody>

<tr>

<td style="line-height:1px;font-size:1px;" width="10"><img alt="" height="10" src="http://nexity.emsecure.net/images/SIP/Template_LDM/ctabottomleft.jpg" width="10" /></td>

<td align="right" style="line-height:1px;font-size:1px;"><img alt="" height="10" src="http://nexity.emsecure.net/images/SIP/Template_LDM/ctabottomright.jpg" width="10" /></td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>



<p style="font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px;"><br />

<span style="font-size: 16px;">Merci de votre participation.</span></p>



<p style="font-family: sans-serif; font-weight: normal; margin: 0px 0px 15px;"><span style="font-size: 16px;">À bientôt,<br />

<span style="color:#c83832;"><strong>L'équipe Nexity</strong></span></span></p>

</td>

</tr>

</tbody>

</table>

</div>

</td>

</tr>

</tbody>

</table>

<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">

<tbody>

<tr>

<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;"><span style="font-size:11px;"><span class="apple-link" style="color: rgb(153, 153, 153); text-align: center;">Vous recevez cet email car vous êtes un client du groupe Nexity.</span><br />

Vous ne souhaitez plus recevoir d'enquête ?<u> ${l://OptOutLink?d=Se%20d%C3%A9sinscrire}.</u></span></td>

</tr>

<tr>

<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: left;"><span style="font-size:11px;">NEXITY LOGEMENT - Société par actions simplifiée au capital de 6 561 944 euros - Siège Social : 19 rue de Vienne - TSA 60030 - 75801 PARIS Cedex 08 - SIREN 399 381 821RCS PARIS ; spécialisée dans le secteur des activités des sociétés holding..</span></td>

</tr>

</tbody>

</table>

</div>
> @TomG said:

> Post the html.



Sorry I didn't manage to post it in HTML, it appears whatever i do...
@CamilleWB Tryi using the code formatting in the message to show the HTML:

!
> @CamilleWB said:

> > @TomG said:

> > Post the html.

>

> Sorry I didn't manage to post it in HTML, it appears whatever i do...



I can see what your problem is. Email clients typically don't support complex CSS. For best results keep it simple and use inline styles.

Leave a Reply