Formatação de HTML/CSS para E-mail

🏷️ HTML/CSS para E-mail (G-mail / Outlook / Hotmail)

• Status da Regra: 🟢 Ativa
• Impacto: 🟡 Médio
• Area(s):
  • HTML
  • CSS
  • E-mail
  • Plataforma do cliente
  • Automações
  • n8n

📌 Contexto

• Emails renderizam diferente de navegadores. O Gmail não suporta corretamente Flexbox.

⚠️ Problema

• display: flex
• justify-content
• align-items
• grid
• margin: auto

➡️ Observações

• Podem quebrar layout ou alinhar tudo à esquerda se usar um dos acima.

✅ Padrão adotado

• Usar layout com <table>
• Centralização via align e estrutura de tabela

⛔ Evitar

• Flexbox
• Grid
• Técnicas modernas de layout web, como os listados acima.

⭐ Regra de ouro

• Se for email e/ou Gmail → usar o table-based layout sempre

🔗 Material de Apoio

Referência rápida para uso prático.

• Devhints Cheat Sheets • HTML email