Become a HubSpot power user — join us for HubSpot Training Day 2017.

Email

¿Por qué no cargan en Outlook los márgenes y los rellenos alrededor de mi imagen?

Última actualización: March 15, 2016

Outlook no da soporte a algunas propiedades CSS como márgenes y relleno cuando se aplican a ciertos elementos como, por ejemplo, <img> y <div>. Aquí encontrarás una lista completa de soporte CSS según cliente de correo electrónico. Todos los márgenes creados dentro de los módulos de texto enriquecido en un correo electrónico serivirán con casi todos los clientes de correo electrónico principales con excepción de Outlook.

Para ajustar el espaciado para una imagen, tendrás que acceder al Código fuente de cada módulo de texto pertinente en tu correo electrónico. Aunque todos estos métodos garantizan la creación de espaciado entre tus imágenes de texto en Outlook, no olvides que no hay un reemplazo adecuado para los márgenes y estas soluciones tendrán sus propios matices. Toma nota de que estos métodos requieren conocimiento básico de HTML.

  • Navega a Contenido > Correo electrónico > da clic en el nombre de tu correo electrónico.
  • En el módulo de texto enriquecido con tu imágen da click en el ícono Código fuente .
Imagen añadida por el usuario
Imagen añadida por el usuario

Método 1 - Usar hspace o vspace

  • Encuentra el código fuente de la imagen a la que deseas añadir espaciado.
  • Al final del código de imagen añade uno o ambos de los códigos siguientes: hspace="10" vspace="10" y reemplaza el valor 10 con el valor de espaciado que deseas.
Imagen añadida por el usuario
hspace define el espacio horizontal y le añadirá un espaciado equivalente al lado derecho y al izquierdo de tu imagen.
  • vspace define el espacio vertical y le añadirá un espaciado equivalente al lado derecho y al izquierdo de tu imagen.

Método 2 - Usa una gráfica

  • Crea una tabla con 3 columnas para contener tu imagen, el espaciado y el texto haciendo clic en Tabla > Insertar Tabla dentro del editor de texto enriquecido del correo electrónico.
Imagen añadida por el usuario
Imagen añadida por el usuario
  • En el Código fuente de la tabla especifica un ancho en la celda vacía como, por ejemplo, <td width="10"> para indicar la cantidad de espaciado que deseas tener entre la imagen y el texto.
  • En el Código fuente de la tabla especifica una familia de fuente, el color de fuente y la altura de líneas como, por ejemplo, style="font-family: sans-serif; font-size:15px; line-height: 1.5em; color: #000000" ya que Outlook añadirá su propia estilización si no se especifica.
  • También puedes combinar tablas con el método hspace/vspace.
Imagen añadida por el usuario
Imagen añadida por el usuario