O que já deu ruim (e como evitar)

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

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