Вот базовая версия кода, который я использую для создания электронных писем, которые сосредоточены в почтовых клиентах. Это работает во всех почтовых клиентах (даже Outlook, Gmail и т. Д.), Включая мобильные.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> /* What it does: Remove spaces around the email design added by some email clients. */ html, body { margin: 0 auto !important; padding: 0 !important; height: 100% !important; width: 100% !important; } /* What it does: Centers email on Android 4.4 */ div[style*="margin: 16px 0"] { margin:0 !important; } /* What it does: Stops Outlook from adding extra spacing to tables. */ table, td { mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; } /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */ table { border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; margin: 0 auto !important; } table table table { table-layout: auto; } </style> </head> <body width="100%" bgcolor="#ffffff" style="margin: 0;"> <center style="width: 100%; background: #ffffff;"> <div style="max-width: 680px; margin: auto;"> <!--[if mso]> <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center"> <tr> <td> <![endif]--> <!-- Centered Email : BEGIN --> <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;"> <tr> <td style=""> EMAIL CONTENT GOES HERE </td> </tr> </table> <!-- Centered Email : END --> <!--[if mso]> </td> </tr> </table> <![endif]--> </div> </center> </body> </html> Полный код доступен здесь .