Como Corrigir a Exibição Incorreta de Espaçamento no Outlook
Resposta Rápida
Para ajustar o espaçamento em e-mails enviados pelo Outlook, você deve usar a tag <td> em conjunto com o atributo style, aplicando o espaçamento com CSS inline.
<td style="padding:20px;">Seu conteúdo</td>No entanto, considerando os potenciais problemas de exibição com o espaçamento no Outlook, pode ser útil usar o atributo cellpadding em tabelas HTML:
<table>
<tr>
<td cellpadding="20">Seu conteúdo</td>
</tr>
</table>Essa abordagem garante uma exibição de espaçamento adequada em diferentes versões do Outlook.
Está Tendo Problemas com o Espaçamento? Experimente Usar Espaçamento de Célula
O Outlook tem uma forma única de lidar com CSS, especialmente quando se trata de espaçamento. É aqui que as tabelas se tornam úteis - elas são mais fáceis de gerenciar.
Usar tabelas aninhadas com o atributo cellpadding é como uma terapia para o Outlook. Aqui está um exemplo dessa abordagem:
<table>
<tr>
<td>
<table cellpadding="10">
<tr>
<td><!-- Solicitações de espaçamento são apenas uma das possíveis soluções --></td>
</tr>
</table>
</td>
</tr>
</table>Isso também aumenta a probabilidade de que o Outlook lide corretamente com o padding.
O Outlook É Teimoso Sobre Espaçadores? Tente Imagens Transparentes
Às vezes, o Outlook exige o uso de imagens transparentes para garantir que a altura e a largura estejam definidas corretamente - essas são frequentemente referidas como Lentes de Contato para Outlook. Isso poderia ser uma imagem de 1x1 pixel que se encaixa no seu layout:
<td>
<img src="blank.gif" width="20" height="20" style="display:block;">
<!-- O espaçamento, como o ar, só parece estar presente quando está faltando -->
</td>Dessa forma, o tamanho da célula corresponderá às dimensões da sua imagem transparente, garantindo um espaçamento correto.
Prefira Estilos Inline
Diferente dos navegadores modernos, o Outlook prefere estilos inline. Você deve usar esses em vez de folhas de estilo CSS externas, considerando os elementos HTML:
<td style="font-size:16px; color:#333;">
<!-- Conteúdo que o Outlook aceita bem -->
</td>Essa abordagem melhora a compatibilidade e promove uma aplicação uniforme de estilo em diferentes clientes de e-mail.
Otimização Através da Simplificação
Para melhorar a compatibilidade com o Outlook, é melhor simplificar seu CSS e optar por soluções HTML mais simples. Esse método pode parecer um pouco retrógrado, mas ajuda a alcançar consistência ao visualizar e-mails em diferentes sistemas.
Visualização
Imagine que um e-mail está dentro de um envelope:
Envelope (📧): Espera-se que contenha conteúdo de tamanho padrão.
Carta (📜): Projetada com bordas atraentes (espaçamento).Em um mundo ideal:
📜 colocada em 📧: O espaçamento aparece como deveria.Mas quando se trata do Outlook:
📧 (Outlook): Regras? Bobagem! Elas são para os outros.
📜 em 📧: Bordas? Que bordas? 🤷♂️Consequentemente, a realidade muitas vezes se parece com isso:
Esperado: 📜🖼️📧 | Realidade: 📜🤏📧Para alcançar o espaçamento desejado, use tabelas e células para manter uma experiência visual atraente para os destinatários.
Design Responsivo: Estilo Outlook
Acredita-se comumente que a responsividade é alcançada por meio de consultas de mídia, mas o Outlook tem suas próprias regras.
No Outlook, a chave para criar e-mails responsivos são as tabelas flexíveis e larguras percentuais.
<table width="100%">
<tr>
<td width="50%">
<!-- Antigamente não havia espaço suficiente -->
</td>
<td width="50%">
<!-- Agora há espaço demais... Clareza, onde você está? -->
</td>
</tr>
</table>Lutando Contra Problemas de Bordas? Use Colapso de Bordas
No Outlook, bordas podem aparecer dobradas, especialmente entre células. A solução é usar a propriedade border-collapse: collapse; na sua tabela.
<table style="border-collapse: collapse;">
<!-- ... -->
</table>Esse simples passo pode ajudar a resolver problemas de bordas e garantir que elas sejam exibidas corretamente.
Espaçamento de Célula: Uma Ajuda Inestimável em Ocultação
O atributo cellpadding em tabelas HTML, embora pareça ultrapassado, oferece uma maneira eficaz de adicionar espaço dentro das células.
<table cellpadding="10">
<tr>
<td>Conteúdo se encaixa onde foi pretendido</td>
</tr>
</table>Recursos Úteis
- Visão Geral Detalhada do Suporte a CSS em Clientes de E-mail com Can I Email – Uma análise do suporte a CSS padding em clientes de e-mail.
- Discussões sobre Problemas de Espaçamento no Outlook no Stack Overflow – Dicas e sugestões da comunidade para resolver problemas de espaçamento no Outlook.
- Guia para Criar E-mails Responsivos que Exibem Corretamente no Outlook da Smashing Magazine – Um guia detalhado sobre como criar e-mails HTML que ficam bons no Outlook.