为什么 mj-attributes 中 mj-button 的 css 不适用于 mj-button？答案

【问题标题】：Why does css for mj-button inside mj-attributes not apply to mj-button?为什么 mj-attributes 中 mj-button 的 css 不适用于 mj-button？
【发布时间】：2023-02-11 01:10:49
【问题描述】：

我正在使用 mjml 代码来构建邮件程序。

我在 <mj-head> 中使用 <mj-attributes> 来处理类和样式。

但是出于某种原因，当我在 <mj-attributes> 中使用 <mj-button/> 时，它不像其他 mjml 元素那样工作......

<mj-head>
    <mj-attributes>

        <mj-button padding="15px 20px" />
         
        <mj-class name="btn-red" color="#FFFFFF" background-color="#FF1761" border-radius="15px" font-size="16px" font-weight="600" />

    </mj-attributes>
</mj-head>
<mj-body>

    <mj-button mj-class="btn-red" href="...">Download PDF Version</mj-button>

</mj-body>

返回的填充样式与默认值相同...

即使我像这样向 .btn-red mjml 类添加填充......

<mj-head>
    <mj-attributes>

        <mj-class name="btn-red" color="#FFFFFF" background-color="#FF1761" border-radius="15px" font-size="16px" font-weight="600" padding="15px 20px" />

    </mj-attributes>
</mj-head>
<mj-body>

    <mj-button mj-class="btn-red" href="...">Download PDF Version</mj-button>

</mj-body>

它再次返回默认填充10px 25px！

如此令人沮丧，我唯一可以更改按钮上的填充的方法是为每个按钮添加填充属性，这太疯狂了！...

<mj-button mj-class="btn-red" href="..." padding="15px 25px">Download PDF Version</mj-button>

为什么是这样？

查看问题的实时 mjml 演示... https://mjml.io/try-it-live/o_HKn3RTo

【问题讨论】：

标签： mjml

【解决方案1】：

您要找的是inner-padding 而不是padding。 Here's the documentation for it。您会注意到 padding 用于偏移元素，而 inner-padding 用于元素本身的实际内部填充。

【讨论】：