# O que já deu ruim (e como evitar)

# 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](https://devhints.io/html-email "Devhints Cheat Sheets • HTML email")