Reset Styles
Just as in traditional web development, it’s a good idea to provide some reset CSS to the emails you build. For the same reason it’s done when building a site, adding a reset to an email helps to normalize how the code gets rendered across multiple email clients. The email templates provided by this reference rely on the following reset:
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{
margin:0;
padding:0;
}
img{
border:0 none;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
a img{
border:0 none;
}
.imageFix{
display:block;
}
table, td{
border-collapse:collapse;
}
#bodyTable{
height:100% !important;
margin:0;
padding:0;
width:100% !important;
}
</style>
Here’s a breakdown, element by element, of what the reset styles are actually doing:
<body> Element Reset
Having a normalized browser baseline to build from ensures more consistent code to be written and, in an email, that starts with resetting the <body> element. It’s a simple reset; only margin and padding are targeted.
<style type="text/css">
body{
margin:0;
padding:0;
}
<img> Element Reset
In order to make sure the images placed in an email are free of any browser- and email client-based quirks, we have to apply some styles to normalize how they’re rendered.
Some email clients add space below images by default, which is problematic if you’re tiling images. Attach the .imageFix class to remove the space. Be aware that, by setting images to block-level elements, you can’t align them without resorting to the float or position CSS properties, which aren’t widely supported:
img{
border:0 none;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
a img{
border:0 none;
}
.imageFix{
display:block;
}
<table> and <td> Element Reset
In a few email clients, <table> and <td> elements are sometimes given some extra spacing which can be frustrating in designs that require some measure of pixel-perfect precision. Using border-collapse removes that spacing. If you’re using border-radius on any element, make sure to set border-collapse:separate;, otherwise those rounded corners won’t show up.
table, td{
border-collapse:collapse;
}
#bodyTable Reset
Since Gmail strips the <body> element from incoming emails, it’s necessary to clone it in order to provide a fallback. Generally, a <table> is used, and some styles must be applied to it in order to have it act like a <body> element would:
#bodyTable{
height:100% !important;
margin:0;
padding:0;
width:100% !important;
}
</style>