Why does css for mj-button inside mj-attributes not apply to mj-button?

I am using mjml code to build a mailer.

I am using <mj-attributes> in the <mj-head> to handle classes and styles.

But for some reason when I use <mj-button/> inside <mj-attributes> it does not work like other mjml elements...

<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>

The padding styles returned are same as the defaults...

Even if I add padding to .btn-red mjml class like this...

<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>

It again returns the default padding 10px 25px again!!!

So frustrating, the only I can change the padding on a button is by adding padding attribute to each single button, which is nuts!...

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

Why is this?

See live mjml demo of the problem... https://mjml.io/try-it-live/o_HKn3RTo

What you're looking for is inner-padding instead of padding. Here's the documentation for it. You'll notice padding is for offsetting the element, whereas inner-padding is for actual internal padding on the element itself.