HTML Email Spacers
Spacers are invisible blocks used to add vertical space between sections of your email. Since CSS margin and padding are unreliable in some email clients (especially Outlook), the most dependable way to create space is by using table-based spacers.
✅ Best Practices
| Tip | Why It Matters |
|---|---|
Use <table> and <td> for spacing | Works consistently across all major email clients |
| Avoid relying only on CSS margin or padding | Many clients ignore or override these styles |
Always use line-height, font-size, and | Ensures the spacer renders properly |
| Test spacers on mobile and desktop | Some clients collapse empty table rows |
🔧 Basic Spacer Example
See the Pen Basic Spacer Example by Email Code Camp (@EmailCodeCamp) on CodePen.
This creates 30px of vertical space. Adjust the height and line-height values to increase or reduce spacing.
📐 Spacer Sizes (Common Values)
| Spacer Type | Height |
|---|---|
| Small spacer | 10px |
| Standard spacer | 20px |
| Large spacer | 30px |
| Section separator | 40px+ |
Use consistent spacing to keep your layout clean and readable.
💡 Spacer Tips
- Always include
in the spacer cell to ensure the space renders in all clients - Avoid empty
<tr>or<td>without styles—they may collapse in some environments - Use spacers instead of
margin-topormargin-bottomwhen working with elements inside tables - Nest spacers inside layout tables for more precise control
🧪 Bonus: Spacer Between Components
See the Pen Spacer Between Components by Email Code Camp (@EmailCodeCamp) on CodePen.