本文介绍如何通过 <mj-attributes> 在 <mj-head> 中为所有 <mj-section> 元素统一配置 padding，避免逐一手动修改每个标签，提升邮件模板的可维护性与一致性。
本文介绍如何通过 `
在 MJML 开发中，<mj-section> 默认应用 padding="20px 0"（即上下各 20px，左右为 0），这虽是合理默认值，但在构建紧凑型邮件布局（如移动端优先、多栏卡片流或极简新闻简报）时，往往需要整体收紧垂直间距。若对数十个模板中的每个 <mj-section> 单独添加 padding="0"，不仅效率低下，还极易遗漏或引发不一致问题。
幸运的是，MJML 提供了强大的全局样式机制——<mj-attributes>，它支持为任意 MJML 组件（不仅是 <mj-all>）定义默认属性。只需在 <mj-head> 内声明 <mj-section> 的默认属性，即可一次性覆盖全部实例：
<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>✅ 关键要点说明：
- <mj-section padding="0" /> 必须置于 <mj-attributes> 内，且无需闭合标签（MJML 语法允许自闭合）；
- 属性值需符合 MJML 规范（如 "0"、"0px"、"12px 24px" 均有效，但 "0rem" 或 CSS 函数不被支持）；
- 局部显式声明（如 <mj-section padding="8px 0">）始终优先于全局设置，确保灵活性；
- 该机制仅作用于 MJML 编译阶段，生成的 HTML/CSS 会自动注入对应内联样式，无需额外 CSS 或 hack 编译后 DOM。
⚠️ 注意事项：
- <mj-attributes> 不支持 CSS 选择器或伪类，仅支持组件级属性覆盖；
- 避免在 <mj-attributes> 中混用冲突定义（如同时写 <mj-section padding="0"/> 和 <mj-section padding="10px"/>），后者不会覆盖前者，而是可能导致未定义行为；
- 若使用 MJML CLI 或构建工具（如 Webpack + mjml-loader），请确保 MJML 版本 ≥ 4.0.0（该特性自 v4 引入并稳定支持）。
通过这一简洁配置，你不仅能显著减少模板冗余代码，还能在团队协作中建立清晰的设计约束——例如统一规定“所有主内容区块默认无垂直留白”，让视觉节奏更可控、迭代更高效。
