Spacing
Margin and padding don’t survive every email client. Outlook for Windows ignores margin on block elements entirely; Yahoo strips it from some selectors; Gmail’s mobile app sometimes collapses padding when it shrinks the email to fit. The reliable way to space content in HTML email is with explicit spacer rows and spacer cells.
Vertical spacing
Section titled “Vertical spacing”Option 1 — Spacer <td> row (preferred)
Section titled “Option 1 — Spacer <td> row (preferred)”The default. A <tr> with a single full-width <td>, an explicit line-height and height (always paired), and mso-line-height-rule:exactly for Outlook for Windows.
<tr> <td colspan="99" style="line-height:10px; height:10px; mso-line-height-rule:exactly;"> </td></tr>Option 2 — Spacer <div> inside a <td>
Section titled “Option 2 — Spacer <div> inside a <td>”Useful when you’re inside a content cell and don’t want to break out into a fresh row. The padding-zeroed <td> wraps a <div> with the same line-height/height pairing:
<td style="padding:0;"> <div style="line-height:10px; height:10px; mso-line-height-rule:exactly;"> </div></td>Option 3 — Inline-block paragraph (fallback)
Section titled “Option 3 — Inline-block paragraph (fallback)”When you can’t use either of the above (e.g. the platform you’re sending through strips empty <td> cells), use an inline-block <p> with explicit height:
<td colspan="99" style="height:20px;"> <p style="display:inline-block; width:100%; height:20px; line-height:1px;"> </p></td>This is the last resort. Some email clients still ignore the <p> height when it has no real content; test before relying on it.
Horizontal spacing
Section titled “Horizontal spacing”For gaps between side-by-side cells (e.g. two columns with a 30px gutter), drop an inline-block <p> inside a <td>. Force font-size:0; padding:0; line-height:0; so the cell takes only the width you specify:
<td colspan="99"> <p style="display:inline-block; width:30px; font-size:0; padding:0; line-height:0;"> </p></td>For full row-level gutters (column-1 / gutter / column-2), use a spacer <td> directly between the two content cells:
<tr> <td>Column 1 content</td> <td style="width:24px; min-width:24px; font-size:0; line-height:0;"> </td> <td>Column 2 content</td></tr>Spacing rhythm
Section titled “Spacing rhythm”Pick consistent values and reuse them. A four-step scale covers most emails:
| Use | Value |
|---|---|
| Tight stack (caption under image, sub-heading) | 8-12px |
| Between related content blocks | 16-24px |
| Between unrelated sections | 40-60px |
| Top/bottom of body, around hero | 80px |
Sticking to a scale keeps the rhythm consistent and prevents the “every section is a different height” problem that creeps into emails built ad-hoc.
What’s next
Section titled “What’s next”Images cover the inline image pattern. Buttons covers the bulletproof button (VML + CSS hybrid).