我正在为客户端制作新的电子邮件模板。我希望它是移动友好的，并且尽可能多的电子邮件客户端/浏览器看起来很好。在线查看之后，MJML.io在研究这个主题时似乎非常受欢迎和推荐。
我要去寻找电子邮件的Bootstrap。我是第一次使用MJML。它非常漂亮，我只是想知道它生成的HTML。
我想指出，我非常了解HTML。我知道所有代码是什么和做什么。我不知道100％它对各种电子邮件客户端/浏览器的影响以及它们如何处理呈现电子邮件的HTML。所以我可以清理这些代码，并删除额外的内联样式，让我的OCD快乐。但是，我不想在响应性方面打破任何东西。即：我不想删除额外的样式并打破Outlook，或打破雅虎等。
以下是一个例子。有一个主表，里面有另一个表。我明白了然后整个表只是一个空行？然后我们有一张包含许多TR的表格。我也明白了。但是，有一个p标签定义了一个样式，然后在其内部span使用另一个样式集。这似乎是多余的。此外，它多次定义基本字体。
我是否可以通过在父table中设置字体系列，字体大小，字体颜色等来简化此操作？或者有什么理由在最低元素级别定义多次？我看看这个，我只是想在正文，第一个div或主表中设置基本字体，p为文本设置，然后span s，以便我需要不同的大小，重量，颜色等，
我只是不知道这是否是电子邮件客户端兼容性魔法酱的一部分，我不想打破它大声笑。 CSS，head等都是来自MJML.io的股票，我知道有些客户剥离了头部，这意味着样式将被忽略。所以我没有包含它，只是下面重要的部分：
<body style="background: #bedae6;">
<div style="background-color:#bedae6;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" border="0">
<tbody>
<tr>
<td>
<div style="margin:0px auto;max-width:600px;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:10px;padding-top:10px;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:middle;width:600px;">
<![endif]-->
<div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:middle;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:middle;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:25px;padding-left:25px;" align="center">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:11px;line-height:22px;text-align:center;">
<p style="font-size: 11px"><span></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;background:#ffffff;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#ffffff;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:20px;padding-top:10px;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
<div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
<span style="display: block; font-size: 28px; font-weight: bold;">
<span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">
<strong>
<span style="font-size: 20px;">
<span style="color: rgb(81, 45, 11);">Hello {{NAME}},</span>
</span>
</strong>
</span>
</span>
</div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
<p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;">
<span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">
<span style="font-size: 18px;">This is the body of my email.</span>
</span>
</p>
</div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left">
<table cellpadding="0" cellspacing="0" style="cellspacing:0px;color:#000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;" width="100%" border="0">
<tr>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">PHP</td>
<td style="padding: 0 0 0 15px;">C, Shell Unix</td>
</tr>
<tr>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">JavaScript</td>
<td style="padding: 0 0 0 15px;">Scheme, Self</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:25px 30px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:0px;color:#FFFFFF;cursor:auto;padding:10px 25px;" align="center" valign="top" bgcolor="#8bb420">
<a href="https://mjml.io" style="text-decoration:none;line-height:100%;background:#8bb420;color:#FFFFFF;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:16px;font-weight:normal;text-transform:none;margin:0px;" target="_blank">
<strong>Click here to go now !</strong>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
<p></p>
<p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Thank You,</span>
</p>
<p></p>
<span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">{{COMPANY_NAME}}</span>
<p></p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" border="0">
<tbody>
<tr>
<td>
<div style="margin:0px auto;max-width:600px;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:10px;padding-top:10px;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:middle;width:600px;">
<![endif]-->
<div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:middle;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:middle;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:25px;padding-left:25px;" align="center">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:11px;line-height:22px;text-align:center;">
<p style="font-size: 11px"><span></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</div>
</body>
-
我想通过设置字体，背景，填充等一次来清理它，从身体和内部div开始......
<body style="background: #bedae6; color:#000000; font-family:'Open Sans', Ubuntu, Arial, sans-serif; font-size:11px; line-height:22px">
<div>
// ....
</div>
</body>
另一个例子，它将字体大小设置为0，然后在子元素中设置实际字体大小，声明填充两次..这是什么：
<tr>
<td style="font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
<p></p>
<p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Thank You,</span>
</p>
<p></p>
<span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">{{COMPANY_NAME}}</span>
<p></p>
</div>
</td>
</tr>
答案 0 :(得分：2)
我会尽力满足您的所有顾虑！
所以基本上一些客户端不允许在某些元素中使用css，例如较旧的Outlook和某些Gmail版本。就像Padding只支持P＆amp; Outlook的表元素。最重要的是，一些客户端处理css继承非常糟糕，因此您必须确保最深的节点具有css而不是将其分组到父节点中。关于font-size 0，这是avoid space between block
的一招这就是为什么你有一些看起来多余的css，他们在这里确保模板在所有支持的客户端看起来都一样。
MJML有一些默认的MJ属性（您可以使用mj-head内的mj属性覆盖）将转换为CSS属性。 就像你说的填充一样，你可以使用填充和填充顶部/底部/右/左，它们可以单独使用，但使用一个不会覆盖另一个。
如果要清理它，可以使用mj-attributes“重置”默认属性。
您遇到的其他问题是生成的空白行HTML的复杂性。 你有多种方法可以使用MJML来处理这个问题（空白部分，填充，带有列和mj-spacer的空部分，有时甚至是带有mj-raw的“原始”html）这取决于你正在进行的设计。
在整个设备和设备之间保持高水平的兼容性客户端需要在输出HTML的可读性方面做出一些牺牲。但是，我们正在尽最大努力清理输出HTML，因为像Gmail这样的客户端对电子邮件有一些尺寸限制