2011-05-17 34 views
5

Estoy diseñando una pequeña aplicación que puede enviar por correo electrónico una de las 6 plantillas de diseño con contenido común.Espaciado en correos electrónicos HTML

¿Cuál es la mejor manera (más consistente) para mantener el espacio y el diseño del texto (entre las líneas etc.)

Estábamos pensando en el uso de simples <br>, pero podríamos perder algo de flexibilidad en comparación con alguna otra cosa. Se trata de un diseño basado en la tabla

Saludos

+0

Si usa párrafos y establece los estilos 'line-height' y' padding', 'margin', eso debería darle control sobre el espaciado entre líneas. –

Respuesta

1

Yahoo (y posiblemente otros clientes de correo electrónico) interpretar <p> diferente que la mayoría de los demás - es difícil hacer una <p> ve bien en Yahoo sin hacer que se vea mal en todos los demás. Según mi experiencia, tendrá más control sobre el espaciado/formateo utilizando <br /> junto con la altura de la línea y, por supuesto, el tamaño de la fuente. Puede darle una etiqueta <br /> con un estilo line-height en línea para ajustar el espaciado de forma más específica.

Sin embargo:

  • de Outlook 2007/2010 tiende a ignorar la propiedad line-height.
  • Los estilos de margin son utilizados y/o ignorados de manera diferente por todos los clientes de correo electrónico. Usar padding en lugar de margin cuando sea posible es un poco más confiable.

El mejor control diseño espaciamiento & disponible en HTML-por-correo electrónico (que se limita a los diseños basados ​​en tablas y estilos en línea, como saben) es separar líneas/párrafos de texto en diferentes celdas de la tabla/filas y espaciado de control con el width & height de los elementos <td>. Con este método, casi siempre tendrías style="border:0; margin:0; padding:0;"

0

La mejor manera hoy en día es utilizar un elemento p por línea y el estilo que con CSS.

Y debería considerar reemplazar la mayoría de los diseños basados ​​en tablas con div sy CSS (excepto donde necesita elementos horizontales con la misma altura, obviamente).

Mi respuesta sería mejor si usted dijera un problema específico como: "¿Cómo puedo lograr esto <insert image here> con HTML?"

2

Debe usar estilos en línea en el marcado de correo electrónico.

Aquí es un ejemplo de cómo separar los párrafos constantemente dentro de su correo electrónico construir

<p style="margin:0 0 15px 0;padding:0;line-height:value;font-size:value">Insert Paragraph information here</p> 
<p style="margin:0 0 15px 0;padding:0;line-height:value;font-size:value">Insert Paragraph information here</p> 
Cuestiones relacionadas