Skip to content

Instantly share code, notes, and snippets.

@doublejosh
Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save doublejosh/9898601 to your computer and use it in GitHub Desktop.
Save doublejosh/9898601 to your computer and use it in GitHub Desktop.
HTML Emails Suck
Main things to keep in mind, since they're hard to believe...
1. Only use inline style.
2. Just give in and nest tables. It's terrible, but reliable everywhere.
3. Margin and padding is not completely supported (depending on DOM element).
Mostly just not Outlook > 2003, which is insane.
4. Apply style to divs and not many other tags.
5. Bullet lists will look different, so use a table.
6. Spacers are your friend. Or more like your stupid roomate,
that you can strangely rely on.
7. You must include text formatting in every div layer. Remember Dreamweaver?
8. Vertical spacing can be greater between elements. Combat that...
8a. Add a css style of "display:block" to all image elements
(including spacers).
8b. Place <div> tags around every table and within every
<td> that contains content. Also applies to <img> only cells.
Some email clients will register a space after the image
if there is not a closing div tag immediately following it.
8c. Any div that is shorter than 14 pixels (or the line-height)
should have it's height specified with CSS and the line height.
9. Most CSS is not available, you can't get fancy.
Check out this great reference: http://www.campaignmonitor.com/css
@jtwalters
Copy link

Thanks for the reminder of how HTML emails are like a trip back to 1999.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment