Add Spacing Between Email Sections: 7 Reliable Methods

Spacing between email sections should come from table-cell padding for most layout gaps, with controlled spacer rows when you need a separate block of vertical space. Avoid relying on empty paragraphs, repeated <br> tags, or CSS margins for critical spacing because Outlook can render them inconsistently.

Google's July 2026 Gmail CSS documentation lists both padding and margin as supported properties. Microsoft gives more cautious guidance for Classic Outlook. Its Word-based rendering engine can handle spacing differently and Microsoft recommends adding layout padding to <td> cells.

This guide is for email marketers, designers, and developers. It covers reliable spacing patterns, working HTML, mobile adjustments, common mistakes, and a reusable spacing scale for cleaner campaigns.

What Is Email Section Spacing?

Email section spacing is the controlled empty area between content blocks, such as a hero, text section, product block, CTA, and footer. In HTML email, this space is usually created with table-cell padding or dedicated spacer cells rather than modern browser layout methods.

Spacing has two jobs.

First, it prevents content from feeling crowded.

Second, it communicates hierarchy.

For example:

Headline

Supporting text

Button

Product section

The space between the text and button should usually be smaller.

The space before the next product section should be larger.

That difference tells the reader which elements belong together.

Email spacing therefore affects:

• Readability
• Visual hierarchy
• CTA visibility
• Section separation
• Mobile usability
• Brand consistency

However, email clients do not calculate every CSS property identically.

MailEditor's guide to why emails render differently across inboxes explains the broader rendering problem.

Padding vs Margin vs Spacer Rows

Use padding on table cells for most email layout spacing. Use spacer rows when you need a separate, controlled vertical gap. Margins can work in many clients, including Gmail, but they are less dependable for critical layout spacing in Classic Outlook.

Here is the practical comparison.

Microsoft explicitly recommends putting spacing on <td> elements when troubleshooting Classic Outlook custom HTML.

Gmail officially supports both padding and margin, but email code still needs to work beyond Gmail.

That is why table-cell padding is the strongest default.

How to Add Spacing Between Email Sections

The safest way to add spacing between email sections is to place each section inside a table cell and apply inline padding to that <td>. This keeps the spacing attached to the structural email table instead of depending on browser-style margins.

Follow these seven methods.

1. Use Table-Cell Padding

For most sections, start here.

<table

  role="presentation"

  width="100%"

  border="0"

  cellspacing="0"

  cellpadding="0">

  <tr>

    <td style="padding:32px 24px;">

      Section content

    </td>

  </tr>

</table>

This gives the section:

• 32px top padding
• 32px bottom padding
• 24px left padding
• 24px right padding

You can also control each side separately.

<td

  style="

    padding-top:32px;

    padding-right:24px;

    padding-bottom:32px;

    padding-left:24px;

  ">

Use this method when different sides need different values.

Why <td> Padding Works Well

Email layouts often use presentation tables.

The <td> therefore becomes the natural place to define spacing around a content block.

Microsoft specifically recommends this method for Classic Outlook because its Word-based engine can handle CSS spacing differently from modern web clients.

2. Add Bottom Padding

You do not always need padding around an entire section.

Sometimes you only need a gap before the next block.

For example:

<tr>

  <td style="padding:0 24px 32px;">

    First section

  </td>

</tr>

<tr>

  <td style="padding:0 24px;">

    Second section

  </td>

</tr>

The first section creates a 32px gap underneath itself.

This is cleaner than inserting several line breaks.

When Bottom Padding Is Best

Use bottom padding when:

• Sections share one background.
• You need simple vertical separation.
• The gap belongs logically to the first section.
• No independent spacer element is required.

This approach also keeps HTML shorter.

3. Use a Spacer Row

A spacer row is a dedicated table row whose only purpose is creating a controlled vertical gap. Use it when spacing should remain separate from the sections above and below.

A simple spacer looks like this:

<table

  role="presentation"

  width="100%"

  border="0"

  cellspacing="0"

  cellpadding="0">

  <tr>

    <td

      height="24"

      style="

        height:24px;

        font-size:0;

        line-height:0;

      ">

      &nbsp;

    </td>

  </tr>

</table>

That creates a 24px gap.

When Spacer Rows Help

They are useful between:

• Hero and introduction
• Major content sections
• Product groups
• CTA and footer
• Sections with different backgrounds

A spacer row also makes the gap easy to identify when reviewing HTML.

Do Not Overuse Them

Every spacer adds markup.

If padding already solves the problem, use padding.

For example, this:

<td style="padding-bottom:24px;">

is simpler than creating another table solely for the same space.

Use spacer rows where the spacing is structurally useful.

4. Reset Text Margins

Headings and paragraphs can bring their own default margins.

That can create unexpected gaps.

For example:

<h2

  style="

    margin:0;

    font-size:24px;

    line-height:30px;

  ">

  Your heading

</h2>

Then add deliberate spacing to the next element.

<p

  style="

    margin:16px 0 0;

    font-size:16px;

    line-height:24px;

  ">

  Supporting content goes here.

</p>

This can work in many clients.

However, if the spacing must remain exact in Classic Outlook, move the gap to the surrounding table cell.

For example:

<tr>

  <td style="padding-bottom:16px;">

    <h2 style="margin:0;">

      Your heading

    </h2>

  </td>

</tr>

<tr>

  <td>

    Supporting text

  </td>

</tr>

That uses structural spacing instead.

5. Add Horizontal Gutters

Horizontal spacing in an email should usually come from left and right padding on table cells. This keeps text and images away from container edges and gives mobile layouts enough breathing room.

Example:

<td style="padding-left:32px; padding-right:32px;">

  Email content

</td>

A common full section might use:

<td style="padding:32px 40px;">

That means:

• 32px vertically
• 40px horizontally

On smaller screens, 40px may be excessive.

You can reduce it with responsive CSS later.

Two-Column Gutters

Suppose you have two columns.

Avoid relying on browser CSS such as gap for critical email spacing.

Instead, add padding inside the cells.

<tr>

  <td

    width="50%"

    valign="top"

    style="padding-right:12px;">

    Left column

  </td>

  <td

    width="50%"

    valign="top"

    style="padding-left:12px;">

    Right column

  </td>

</tr>

Together, the cells create a 24px gutter.

Another option is a dedicated gutter cell.

<tr>

  <td width="288">

    Left column

  </td>

  <td width="24">&nbsp;</td>

  <td width="288">

    Right column

  </td>

</tr>

This can make desktop spacing very explicit.

6. Control Image Spacing

Images can create unexpected gaps that are not actual section padding.

HTML images behave like inline elements by default.

That can leave baseline space beneath an image in some layouts.

Use:

<img

  src="image.jpg"

  width="600"

  alt="Campaign image"

  style="

    display:block;

    width:100%;

    max-width:600px;

    height:auto;

  ">

display:block removes the inline baseline behavior.

Then create intentional spacing using the parent <td>.

For example:

<td style="padding-bottom:24px;">

  <img

    src="image.jpg"

    width="600"

    alt="Campaign image"

    style="display:block;">

</td>

This keeps image behavior and section spacing separate.

If your issue is the image itself, use MailEditor's guide to fixing email images that do not display correctly.

7. Adjust Spacing on Mobile

Desktop email spacing often needs to shrink on mobile because wide horizontal padding leaves too little room for text. Use a responsive class to reduce section padding on narrow screens while keeping the desktop value as the base fallback.

For example:

<head>

  <style>

    @media screen and (max-width:600px) {

      .section-padding {

        padding:24px 20px !important;

      }

    }

  </style>

</head>

Then:

<td

  class="section-padding"

  style="padding:40px;">

  Content

</td>

Desktop receives 40px.

Supporting mobile clients receive:

• 24px top and bottom
• 20px left and right

Google currently documents support for standard media queries based on screen width.

The Gmail CSS documentation was last updated July 22, 2026.

Your basic layout should still remain usable if the media query does not apply.

How Much Spacing Should You Use?

There is no universal pixel value for every email section. Use smaller spacing between related elements and larger spacing between separate sections. The important goal is consistency rather than choosing one supposedly perfect number.

A practical scale might be:

These are design starting points.

They are not Gmail or Outlook requirements.

MailEditor Spacing Token Template

Instead of choosing random values throughout your template, define a small spacing system.

XS = 8px

S  = 12px

M  = 16px

L  = 24px

XL = 32px

2XL = 40px

Then assign those values consistently.

For example:

Heading → paragraph: 16px

Paragraph → button: 24px

Section → section: 32px

Major campaign block → next block: 40px

This makes future template editing easier.

It also reduces small visual inconsistencies.

Padding or Margin for Email?

Padding is usually the safer choice for important HTML email layout spacing, especially when placed on table cells. Margin can still be useful for headings and paragraphs, but Classic Outlook may render CSS margins and padding differently from modern email clients.

Microsoft's current documentation states that Classic Outlook has limited standard CSS margin and padding support.

Its recommended fix for custom HTML is to apply padding to <td> elements in layout tables.

Google Gmail is more flexible.

Its current supported property list includes:

• margin
• margin-top
• margin-right
• margin-bottom
• margin-left
• padding
• padding-top
• padding-right
• padding-bottom
• padding-left

The practical rule is therefore:

Use the method that survives your least flexible important client.

If Classic Outlook matters, table-cell padding is a safer foundation.

Padding vs Cellpadding

CSS padding controls individual sides and can vary by cell. The HTML cellpadding attribute adds padding across table cells more broadly. For modern email templates, reset cellpadding to zero and apply intentional inline padding to individual <td> elements.

A common table opening is:

<table

  role="presentation"

  width="100%"

  border="0"

  cellspacing="0"

  cellpadding="0">

Then:

<td style="padding:24px 32px;">

This provides more precise control.

Using:

cellpadding="20"

adds the same basic cell padding across that table.

That may be useful in simple structures.

However, it becomes restrictive when one cell needs different spacing.

Should You Use Margin in Email?

You can use margin for non-critical text spacing when your tested client mix handles it correctly. Avoid making essential section separation depend only on margin when Classic Outlook compatibility matters. Use table-cell padding instead for structural gaps.

Margin can be convenient for:

• Headings
• Paragraphs
• Small text blocks

For example:

<p style="margin:0 0 16px;">

  First paragraph.

</p>

But if the 16px gap is essential to the layout, a table-cell structure is more defensive.

Do not assume browser behavior equals email behavior.

Why Outlook Changes Spacing?

Classic Outlook uses a Word-based HTML processing engine rather than a normal browser rendering engine. Microsoft says this can make standard CSS margins and padding appear differently, particularly in custom HTML email.

Microsoft's current recommendation is direct:

Use padding on the <td> elements of the tables defining the layout.

That means this is less dependable for critical layout:

<div style="padding:32px;">

A table-based approach is safer:

<table

  role="presentation"

  width="100%"

  border="0"

  cellspacing="0"

  cellpadding="0">

  <tr>

    <td style="padding:32px;">

      Content

    </td>

  </tr>

</table>

New Outlook and Classic Outlook do not share identical rendering behavior.

So test both when they matter to your audience.

Why Gmail Spacing Looks Different?

Gmail supports many standard CSS spacing properties, but an email that works in Gmail can still fail elsewhere. Gmail should therefore be one test client, not the standard you use to decide whether a spacing method is universally safe.

Google currently supports both inline <style> blocks and many standard CSS properties.

This includes padding and margin.

It also supports width-based media queries.

That makes responsive spacing straightforward in Gmail.

However, email design must account for the full recipient mix.

MailEditor covers this problem in its guide to email rendering differences across inboxes.

Common Email Spacing Mistakes

Most email spacing problems come from browser-first CSS, default margins, empty content used as a spacer, or inconsistent values across sections. Fix the structure before adding more CSS rules.

Using Repeated <br> Tags

Avoid this:

Section one

<br>

<br>

<br>

Section two

A <br> represents a line break.

It is not a layout system.

Different line-height calculations can alter the final gap.

Using Empty Paragraphs

Avoid:

<p>&nbsp;</p>

<p>&nbsp;</p>

This depends on paragraph styles and line height.

It also adds meaningless content.

Using Spaces for Positioning

Avoid:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Non-breaking spaces can prevent normal text wrapping.

Use them only when characters genuinely need to stay together.

Forgetting Default Margins

A heading may look too far from another block because of its default margin.

Reset it:

<h2 style="margin:0;">

Then add spacing intentionally.

Putting Padding Everywhere

Too many nested elements with their own padding can double the intended gap.

For example:

Section padding: 32px

Inner table padding: 24px

Text block padding: 16px

The final spacing may become much larger than expected.

Know which element owns the gap.

Using Random Values

Avoid:

17px

31px

22px

29px

14px

unless the design genuinely requires them.

A small spacing scale produces cleaner layouts.

Forgetting Mobile

A desktop section with:

padding-left:60px;

padding-right:60px;

may leave very little room on a narrow screen.

Reduce horizontal padding on mobile.

Section Spacing vs Line Height

Section spacing controls distance between separate content blocks. Line height controls space between lines inside text. Do not increase line height just because two sections appear too close together.

For example:

<p

  style="

    font-size:16px;

    line-height:24px;

    margin:0;

  ">

The 24px line height controls text readability.

Then:

<td style="padding-bottom:32px;">

controls the gap after the section.

Treat these as different settings.

Otherwise, text can become overly loose.

Section Spacing vs Cell Spacing

Section spacing is visual space between meaningful email blocks. HTML cellspacing controls space between cells throughout a table. Modern email layouts usually set cellspacing="0" and create intentional spacing through padding or dedicated cells.

A clean starting table is:

<table

  role="presentation"

  width="100%"

  cellspacing="0"

  cellpadding="0"

  border="0">

This removes unintended table spacing.

Then you add only the gaps the design needs.

How to Test Email Spacing

Test spacing using the final delivered email in your important desktop and mobile clients. Check section gaps, text margins, image baselines, column gutters, buttons, and responsive padding rather than judging only from a browser preview.

Use this workflow:

1. Reset accidental default margins.
2. Check section padding in the editor.
3. Preview desktop width.
4. Preview narrow mobile width.
5. Send through the real ESP.
6. Open the delivered message in Gmail.
7. Test Classic Outlook when relevant.
8. Test New Outlook separately.
9. Test a mobile inbox.
10. Check section background transitions.
11. Check button spacing.
12. Check images for unwanted bottom gaps.
13. Verify responsive padding.
14. Retest after every structural change.

MailEditor's email testing across devices guide covers the wider testing workflow.

Do not stop at a browser preview.

Chrome rendering does not prove Outlook compatibility.

Email Spacing Checklist

Before sending, confirm:

• Layout tables use cellspacing="0".
• Layout tables use cellpadding="0" by default.
• Important section padding is on <td> cells.
• Paragraph margins are intentional.
• Heading margins are reset.
• Empty paragraphs are not being used as spacers.
• Repeated <br> tags are not creating section gaps.
• Spacer rows have explicit heights.
• Image elements use display:block where needed.
• Desktop spacing follows a consistent scale.
• Mobile horizontal padding is reduced where needed.
• Column gutters remain visible after stacking.
• Gmail has been tested.
• Relevant Outlook versions have been tested.
• The ESP-delivered version has been tested.

Final Answer

To add spacing between email sections reliably:

1. Use inline padding on <td> cells.
2. Add bottom padding for simple section gaps.
3. Use spacer rows for independent vertical space.
4. Reset heading and paragraph margins.
5. Use cell padding for horizontal gutters.
6. Set images to display:block when baseline gaps appear.
7. Reduce large padding values on mobile.
8. Avoid empty paragraphs and stacked <br> tags.
9. Keep spacing values consistent.
10. Test Gmail, Outlook, and mobile clients.

For most HTML email layouts, the safest rule is:

Use table-cell padding first. Use spacer rows when padding does not express the layout clearly. Use margin only when its fallback behavior is acceptable.

This gives you predictable spacing without turning the template into unnecessary nested markup.

You can use the MailEditor HTML Email Builder to edit email sections visually and keep layouts organized without manually changing every HTML spacing value.

For a faster start, choose one of MailEditor's free email templates and customize the sections for your campaign.

Frequently Asked Questions

Question: Does padding work in Gmail?

Answer: Yes. Google's current Gmail CSS documentation lists padding, individual padding properties, margin, and individual margin properties as supported CSS. Gmail also supports width-based media queries, which can be used to reduce section padding on smaller screens.

Question: What is an email spacer row?

Answer: An email spacer row is a table row created specifically to provide empty vertical space. Its cell normally has an explicit height with minimal font size and line height. Spacer rows are useful when a gap should remain independent from the content blocks around it.

Question: How much space should sections have?

Answer: There is no universal required spacing between email sections. A practical system may use smaller 8–16px gaps between closely related elements and 24–40px gaps between larger components or sections. Keep the values consistent and adjust them to your design and mobile layout.

Technical Sources

• Google for Developers - Gmail CSS Support
• Microsoft Learn - Outlook Email Rendering Guidance