Default CSS


MailDeveloper applies some CSS by default to all emails. Most of the default CSS is for cross-client support, while the rest of it is utility classes.

The full CSS applied to all emails can be seen below. All these styles are also inlined upon export. Comments are not included in the email HTML.

#outlook a { padding: 0; }
body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; }
.ExternalClass { width: 100%; }
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass th,
.ExternalClass div { line-height: 100%; }
.background-table { margin: 0; padding: 0; width: 100% !important; min-width: 100% !important; line-height: 100% !important; }

img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display: block; }
a img { border: none; }

table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
th { border-collapse: collapse; }

/*
 * Fixes an issue in iPads specifically. Read more:
 * https://www.emailonacid.com/blog/article/email-development/fixing-the-ipad-100-percent-width-gap-email-bug/
 */
@media screen and (device-width: 768px) and (device-height: 1024px) {
    body { min-width: 701px !important; }
}

In addition, these media queries are created for each content table width in the email (here shown at 600):

@media all and (max-width: 600px) {
    .background-table.has-width-600 .email-content { width: 100% !important; }

    .background-table.has-width-600 img { max-width: 100%; height: auto; }

    .background-table.has-width-600 .mobile-display-block { display: block; width: 100%; }
    .background-table.has-width-600 .mobile-display-none { display: none; }
    .background-table.has-width-600 .mobile-display-table-caption { display: table-caption !important; }
    .background-table.has-width-600 .mobile-display-table-header-group { display: table-header-group !important; }
    .background-table.has-width-600 .mobile-display-table-row { display: table-row !important; }
    .background-table.has-width-600 .mobile-display-table-footer-group { display: table-footer-group !important; }
}

MailDeveloper is an advanced editor for HTML emails. Reduce email development time by hours now.

Try online demo or Read more