Definition
HTML email spacing refers to the techniques used to control vertical and horizontal white space between elements in email designs. Email spacing is complicated by the fact that HTML whitespace collapses differently in email clients than in modern web browsers, and CSS spacing properties such as margin and padding have inconsistent support across email clients. The most significant challenges arise in Outlook desktop (2007–2021) which uses Microsoft Word's HTML rendering engine, notorious for its limited CSS support.
The transparent spacer GIF technique has been a foundational email spacing method for decades. It involves using a 1x1 pixel transparent GIF image that is scaled to the desired height or width using the HTML width and height attributes. Because image dimensions are respected even when CSS is ignored, this technique works in every email client including Outlook Word. However, spacer GIFs increase the total number of HTTP requests and can affect rendering speed, so they are best used sparingly for critical spacing that cannot be achieved through other methods.
Modern email spacing approaches combine HTML table attributes (cellspacing, cellpadding, width, height), inline CSS (padding, margin, line-height), and spacer GIFs for fallback. Outlook desktop supports padding in table cells but does not support margin on most elements. Gmail strips <style> tags in the <head> when CSS is not fully inlined. Apple Mail supports modern CSS spacing properties including flexbox and grid in some configurations. The recommended approach is to build spacing into table cell padding and use conditional Outlook comments to address Outlook-specific gaps.
Best Practices
Use HTML table cell padding (cellpadding attribute or padding inline style) for primary spacing between content blocks. This provides the broadest support across all email clients.
Employ transparent spacer GIFs for vertical spacing in Outlook desktop where CSS line-height and margin may not be honoured. A simple <img src="..." width="1" height="20" alt=""> creates reliable 20-pixel spacing.
Set line-height on text elements to control vertical space within paragraphs. Outlook uses line-height consistently; combining it with font-size and spacing above/below text creates consistent paragraph spacing.
Avoid using margin on block elements such as <p> and <div> because Outlook desktop ignores it. Use nested table cells with padding instead to create space between elements.
Add conditional Microsoft-specific spacing fix code using MSO comments. For example, add extra cell height in Outlook using <!--[if mso]><td height="20"> </td><![endif]-->.
Minimise reliance on CSS properties known to fail in Outlook: margin, display, float, vertical-align on non-table elements, and percentage-based padding. Test every template in Outlook desktop before deployment.
Frequently Asked Questions
Gmail uses a modern rendering engine (Blink) that respects CSS spacing properties like margin and padding. Outlook desktop uses Microsoft Word's engine which ignores many CSS properties. The solution is to use table-based spacing and conditional MSO comments that target Outlook's renderer specifically.
A transparent spacer GIF is a 1x1 pixel invisible image that can be scaled to any size using width and height attributes. To create 30 pixels of vertical space, use `
`. The `display:block` prevents extra space around the image.
Yes, Gmail (both web and mobile) supports inline `padding` on most elements. However, Gmail strips `