El relleno css no funciona en Outlook

10 minutos de lectura

Avatar de usuario de Mukesh
Mukesh

Tengo el siguiente html en la plantilla de correo electrónico.

Obtengo una vista diferente en MS Outlook y en Gmail para lo mismo.

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
    <span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span></td>
</tr>

en gmail
en gmail

en perspectiva
en perspectiva

¿Cómo arreglar esto?

  • Para empezar, podría intentar afectar todos los elementos con *{margin: 0; padding: 0;} en su hoja de estilo externa. Solía ​​​​hacer esto cuando depuraba. Luego establezca el margen/relleno localmente en los elementos individuales (como ya lo ha hecho).

    – Hauns TM

    31 de enero de 2014 a las 7:07

  • Lo siento si esto no es relevante, soy nuevo en HTML, pero acabo de tener cierto éxito con el margen <p style='margin-left:36.0pt'> que descubrí al ver la fuente del correo electrónico después de configurarlo de la manera que quería.

    – SSlinky

    23 de agosto de 2016 a las 10:34


  • @nless El enlace que mencionaste es de esta misma pregunta.

    – Mukesh

    27/06/2018 a las 14:30

avatar de usuario de monners
moners

Desafortunadamente, cuando se trata de EDM (Correo electrónico directo), Outlook es su peor enemigo. Algunas versiones no respetan el relleno cuando el contenido de una celda dicta las dimensiones de la celda.

El enfoque que le dará más coherente El resultado en los clientes de correo es usar celdas de tabla vacías como relleno (lo sé, el horror), pero recuerde llenar esas tablas con una imagen en blanco de las dimensiones deseadas porque, lo adivinó, algunas versiones de Outlook no respetan la altura/ declaraciones de ancho de celdas vacías.

¿No son divertidos los EDM? (No, ellos no son.)

  • gracias por señalar las imágenes, esto definitivamente funcionará. por cierto para aquellos que buscan imágenes adecuadas – placehold.it es una muy buena fuente, por ejemplo placeholdit.imgix.net/…

    – Dios bendiga fresa

    9 de noviembre de 2016 a las 11:07


  • Tuve que suprimir el impulso de votar en contra de este tema porque la perspectiva apesta … pero buena respuesta, así que +1

    – GDY

    16 de noviembre de 2017 a las 8:47

  • ¿Qué es un EDM?

    – Ismael

    16/01/2018 a las 17:40

  • Por cierto: logré resolver sin imagen usando “% de ancho” para td en la tabla

    – Karan Chadha

    13 de marzo de 2018 a las 0:43

  • @Craig1123 Eso tiene mucho más sentido que la música dance electrónica. 😉

    – Matt Cosentino

    26 de marzo de 2019 a las 23:21

Avatar de usuario de Sachi Cortés
Sachi Cortés

Evite rellenos y márgenes en los boletinesalgunos clientes de correo electrónico ignorarán estas propiedades.

Puedes usar “vacío” tr y td como se sugirió (pero esto dará como resultado una gran cantidad de html), o puede use bordes con el mismo color de borde que el fondo del correo electrónico. entonces, en lugar de padding-top: 40px puedes usar border-top: 40px solid #ffffff (asumiendo que el color de fondo del correo electrónico es #ffffff)

Probé esta solución en gmail (y gmail para empresas), correo de yahoo, web de Outlook, escritorio de Outlook, Thunderbird, correo de Apple y más. Por lo que puedo decir, la propiedad fronteriza es bastante segura de usar en todas partes.

Ejemplo:


<!-- With paddings (WON'T WORK IN ALL EMAIL CLIENTS!) -->
<table>

    <tr>

        <td style="padding: 10px 10px 10px 10px">
            <!-- Content goes here -->
        </td>

    </tr>

</table>


<!-- Same result with borders (assuming a white background-color) -->
<table>

    <tr>

        <td style="border: solid 10px #ffffff">
           <!-- Content goes here -->
        </td>

    </tr>

</table>


<!-- Same result using empty td/tr (A lot more html than using borders, messy on large emails) -->
<table>

    <tr>
        <td colspan="3" height="10" style="height: 10px; line-height: 1px">&nbsp;</td>
    </tr>


    <tr>

        <td width="10" style="width: 10px; line-height: 1px">&nbsp;</td>

        <td><!--Content goes here--></td>

        <td width="10" style="width: 10px; line-height: 1px">&nbsp;</td>

    </tr>


    <tr>
        <td colspan="3" height="10" style="height: 10px; line-height: 1px">&nbsp;</td>
    </tr>

</table>

<!-- 
With tr/td every property is needed:
- "height" must be setted both as attribute and style, same with width. 
- "line-height" must be setted because the default value may be greater than the wanted height.
- The "&nbsp;" is there because some email clients won't render empty columns. 
- You can remove the "colspan" and still will work, but is cleaner, especially when inspecting the element in the browser's console.
-->

Además, aquí hay una excelente guía para hacer newsletters responsive sin mediaqueries. Los correos electrónicos realmente funcionan en todas partes:

https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries–cms-23919

Y recuerda siempre hacer estilos en línea. Esto es importante porque algunos clientes de correo electrónico no soporta la <style> etiqueta:

https://inliner.cm/

A correos electrónicos de pruebaaquí hay un buen recurso:

https://putsmail.com/

Finalmente, para dudas sobre soporte css en clientes de correo electrónico Puedes ir aquí:

https://templates.mailchimp.com/resources/email-client-css-support/

o aquí:

https://www.campaignmonitor.com/css/

EDITAR:

Si tiene problemas con el uso de bordes en Outlook, puede intentar agregar este fragmento al encabezado de su correo electrónico. (perspectivas compatibles <head> etiqueta):

<head>
    <!--[if mso]>
    <style type="text/css">
        table {border-collapse:collapse; border-spacing:0; margin:0}
        div, td {padding:0;}
        div {margin:0 !important;}
    </style>
    <![endif]-->
</head>

Outlook asume que los bordes de las celdas de la tabla no deben superponerse a menos que se use border-collapse:collapse en los estilos de tabla.

  • Acabo de probar en Outlook 365 (v16.0.12527), y descubrí que aplicar un borde a mi estilo H2 de esta manera: h2 { border-top: solid 100px #ffffff; } agrega un borde de algunos píxeles (¿quizás 8?) Pero no los 100px que estoy especificando. Intenté esto muchas veces con diferentes valores, siempre con el mismo borde de ~8px.

    – Miguel

    8 de marzo de 2021 a las 21:47

  • No funciona en Outlook. La perspectiva del hombre es un pedazo de cr@p.

    – Mad Mac

    28/09/2021 a las 23:50

  • El grosor del borde solo será tan grueso como el propio contenedor en Outlook. En otras palabras, si aplicas un 100px grosor del borde, Outlook solo presentará la mayor parte del borde que pueda mostrar para el contenedor del elemento actual. Para mí, esto se siente como el viejo modelo de caja de IE. El truco consiste en especificar una altura para el elemento contenedor, generalmente una tabla o td para Outlook.

    – Metro Pitufo

    27 de julio a las 21:35

Avatar de usuario de Mukesh
Mukesh

Cambié a seguir y funcionó para mí

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">                              
        <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">               
            <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>                    
            <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>              
        </table>                    
    </td>
</tr>

Actualización basada en la solicitud de Bsalex de lo que realmente ha cambiado.
Reemplacé la etiqueta de intervalo

<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>

con tablas y etiquetas td de la siguiente manera

   <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0"> 
      <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
      <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
   </table>

  • Indique lo que ha cambiado. No fuerce a los usuarios a usar herramientas de diferenciación.

    – Bsalex

    31 de mayo de 2018 a las 22:23

  • El relleno debe continuar <td>s para la compatibilidad entre correos electrónicos, no <span>s.

    – Nathan

    16 de septiembre de 2021 a las 6:29

Para crear HTML en una plantilla de correo electrónico que es un correo electrónico/boletín, el relleno/margen no es compatible con los clientes de correo electrónico. Puede tomar un tamaño de 1×1 de imagen gif en blanco y usarlo.

<tr>
  <td align="left" valign="top" style="background-color:#7d9aaa;">
    <table width="640" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="https://stackoverflow.com/questions/21474239/images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top"><img style="display:block;" src="https://stackoverflow.com/questions/21474239/images/spacer.gif" width="20" height="1"  alt="" /></td>
        <td align="right" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;"><a href="#" style="color:#ffffff; text-decoration:none; cursor:pointer;" target="_blank">Order Confirmation</a></font></td>
        <td align="left" valign="top" width="200"><img style="display:block;" src="https://stackoverflow.com/questions/21474239/images/spacer.gif" width="200" height="1"  alt="" /></td>
        <td align="left" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;">Your Confirmation Number is 260556</font></td>
        <td align="left" valign="top"><img style="display:block;" src="https://stackoverflow.com/questions/21474239/images/spacer.gif" width="20" height="1"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="https://stackoverflow.com/questions/21474239/images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
    </table>
</td>
</tr>

Solo usa
<Table cellpadding="10" ..>
...
</Table>


No use px.Works en MS-Outlook.

  • cellpadding en <table> no es confiable, al igual que cellspacing. Es mejor usar relleno en <td>

    – deleitarse

    26 de agosto de 2016 a las 14:10

Avatar de usuario de Subbu
subbu

El relleno no funcionará en Outlook. En lugar de agregar una imagen en blanco, simplemente puede usar varios espacios (& nbsp;) antes de los elementos/textos para el relleno a la izquierda Para el relleno superior o inferior, puede agregar un div que contenga solo espacios (& nbsp;) solo. ¡¡¡Esto funcionará!!!

  • cellpadding en <table> no es confiable, al igual que cellspacing. Es mejor usar relleno en <td>

    – deleitarse

    26 de agosto de 2016 a las 14:10

Avatar de usuario de Jacob
jacob

Tuve el mismo problema y terminé usando border en vez de padding.

  • sería genial si funcionara, no se resolvió en Outlook.com

    – niltoides

    16 de abril de 2018 a las 18:53


  • Parece funcionar en mi versión de Outlook. ¡Gracias jacob!

    – Factura pendiente

    2 de diciembre de 2019 a las 3:10

¿Ha sido útil esta solución?