如何在 MJML 中全局设置 mj-section 的默认 padding

本文介绍如何通过 在 中为所有 元素统一配置 padding，避免逐一手动修改每个标签，提升邮件模板的可维护性与一致性。

本文介绍如何通过 `` 在 `` 中为所有 `` 元素统一配置 padding，避免逐一手动修改每个标签，提升邮件模板的可维护性与一致性。

在 MJML 开发中， 默认应用 padding=”20px 0″（即上下各 20px，左右为 0），这虽是合理默认值，但在构建紧凑型邮件布局（如移动端优先、多栏卡片流或极简新闻简报）时，往往需要整体收紧垂直间距。若对数十个模板中的每个 单独添加 padding=”0″，不仅效率低下，还极易遗漏或引发不一致问题。

幸运的是，MJML 提供了强大的全局样式机制——，它支持为任意 MJML 组件（不仅是 ）定义默认属性。只需在 内声明 的默认属性，即可一次性覆盖全部实例：

<mjml>   <mj-head>     <mj-attributes>       <!-- 全局覆盖所有 mj-section 的 padding -->       <mj-section padding="0" />       <!-- 可选：同时统一其他常用属性 -->       <mj-section background-color="#ffffff" />       <!-- 若需差异化控制，仍可在单个标签中显式覆盖 -->       <!-- <mj-section padding="16px 0"> → 此处将优先生效 -->     </mj-attributes>   </mj-head>   <mj-body>     <mj-section>       <mj-column>         <mj-text>Hello, global padding is now 0!</mj-text>       </mj-column>     </mj-section>     <mj-section>       <mj-column>         <mj-text>This section also respects the global setting.</mj-text>       </mj-column>     </mj-section>   </mj-body> </mjml>

✅ 关键要点说明：

• 必须置于 内，且无需闭合标签（MJML 语法允许自闭合）；
• 属性值需符合 MJML 规范（如 “0”、”0px”、”12px 24px” 均有效，但 “0rem” 或 CSS 函数不被支持）；
• 局部显式声明（如 ）始终优先于全局设置，确保灵活性；
• 该机制仅作用于 MJML 编译阶段，生成的 HTML/CSS 会自动注入对应内联样式，无需额外 CSS 或 hack 编译后 dom。

⚠️ 注意事项：

• 不支持 CSS 选择器或伪类，仅支持组件级属性覆盖；
• 避免在 中混用冲突定义（如同时写 和 ），后者不会覆盖前者，而是可能导致未定义行为；
• 若使用 MJML CLI 或构建工具（如 webpack + mjml-loader），请确保 MJML 版本 ≥ 4.0.0（该特性自 v4 引入并稳定支持）。

通过这一简洁配置，你不仅能显著减少模板冗余代码，还能在团队协作中建立清晰的设计约束——例如统一规定“所有主内容区块默认无垂直留白”，让视觉节奏更可控、迭代更高效。