Email signature generator › Spacing

Fixing the spacing in an email signature

Two opposite complaints with one cause. Either a gap appears that you did not create, or the spacing you designed disappears. Both come from how the client treats default margins on the elements you used.

The gap above the signature

A blank line or two between your text and the signature, which you cannot delete by pressing backspace, is almost always a paragraph margin. Your compose window wraps typed text in paragraph elements, the signature is wrapped in its own, and each one carries a default top and bottom margin of roughly one line. Two of them stacked produce the gap.

The fix is at the top of the signature, not in the compose window. If the signature's outermost element is a table rather than a div or a paragraph, it carries no margin, and the gap shrinks to whatever the message text contributes on its own.

Spacing that collapses on arrival

The opposite case: your signature looks correctly spaced where you built it, and arrives cramped. This is the Word rendering engine in Outlook for Windows discarding margin and most padding on anything that is not a table cell.

The reliable way to create vertical space in an email is a table row with an explicit height and nothing in it, or cell padding on a table cell. Both survive every engine. Margin on a div survives in browsers and disappears in Outlook, which is why a signature can look right in three places and wrong in the one that matters.

The line-height trap

If lines within the signature are too far apart, the cause is usually an inherited line-height from the client rather than anything you wrote. Setting line-height explicitly on each cell — a value like 1.4 or a pixel value — stops the inheritance and makes the block predictable.

Watch for the opposite too. A very tight line-height on a signature that includes a long address can push descenders into the line below in clients that render at a different base font size.

The invisible extra element

Rich-text editors often add an empty paragraph after pasted content. It is invisible in the editor, occupies a line in the sent message, and no amount of adjusting the signature markup removes it because it is not part of the signature.

Clear the signature field completely before pasting rather than pasting over existing content, and after pasting press the down arrow to see whether the cursor lands on an empty line below the signature. If it does, delete it.

Reply spacing specifically

On a reply, spacing problems compound: your paragraph, the signature block, the separator the client inserts, and the quoted message each contribute their own margins. A signature built as a table with explicit internal spacing behaves the same everywhere in that stack, which is the only way to get a predictable result on a thread rather than only on a new message.

Building the space instead of hoping for it

The construction that behaves identically everywhere is an empty table row with an explicit height and a non-breaking space inside it. The space is there because some clients collapse a genuinely empty cell to zero height regardless of what you asked for:

<tr><td height="12" style="height:12px;line-height:12px; font-size:0">&nbsp;</td></tr>

The three declarations together stop the space from inheriting a line-height that would make the row taller than 12 pixels. It is verbose and it is the only version that produces exactly 12 pixels in Outlook, Gmail and Apple Mail alike.

Horizontal spacing between logo and text

The same principle applies sideways. Rather than putting a margin on the text cell, add a narrow spacer cell between the two columns with an explicit width — 16 or 20 pixels is usually right. Cell padding on the text cell also works and is less markup, but a spacer column survives the case where a client decides to stack the columns on a narrow screen.

Diagnosing which layer added the gap

Send yourself a message and view the source. Count the elements between the end of your typed text and the start of the signature table. If there are two or three empty paragraphs, the compose window added them and the fix is in how the signature is inserted, not in the signature. If there are none and the gap is still there, it is margin on an element inside the signature, and it is yours.

Frequently asked questions