This seems fairly simple but I can't see a way to do this. Using MJML 4.x I have a number of templates that contain <mj-section> ... </mj-section>.
According to the docs the default CSS padding applied on <mj-section> is 20px 0. This means that there is a 20px space between the top/bottom of each section.
I want to be able to change this globally rather than going through every single section tag in my files and doing something like <mj-section padding="0">.
I've seen from the docs it's possible to specify things in <mj-head> that get applied "globally". But I can't see how you can do it for MJML tags as such. For example you can do this:
<mj-head>
<mj-attributes>
<mj-all font-family="Arial" font-size="14px" color="#000" line-height="1.5" />
</mj-attributes>
</mj-head>
but that works because it's applying CSS properties on the <body> i.e. font 14px Arial in black with 1.5 line height.
How can you target <mj-section> or otherwise override the default padding on those elements?
I've tried inspecting the compiled template but that doesn't seem right because I'd then be adding CSS properties to a compiled set of markup, which doesn't seem like the right approach.
You've totally got this! So what you want to do is style those s a bit differently, right? Good news: MJML's got your back.
What you need to do is hang out in the area. This is where all the cool, global styles happen. You've already figured out how to use for the whole shebang with , but did you know you can do the same thing for just the ? Yep, it's true.
All you've got to do is replace the with and add your own padding, like so:
<mjml>
<mj-head>
<mj-attributes>
<mj-section padding="0px">
</mj-attributes>
</mj-head>
<!-- Rest of your MJML code goes here -->
</mjml>And You've just told all the s in your email to drop that extra space and tighten things up. No need to go digging through every single section tag in your files - MJML's got you covered!