Mjml: Padding inside of columns

[puurinternet]

Hello,

I had this issue which I kind of solved by using this work-around #564 but there still is padding: 10px 25px added to the container td inside of each column which I don't want and have no option to remove. I could of course make the whole design 20px wider, but that might break other things and doesn't fix the big vertical gaps between sections.
Is there a way to remove this default padding, or do I need to remove this from the generated html?

[ngarnier]

Hi @puurinternet, sorry you're having an issue. Can you please share the markup you already have, with hosted links to your images?

[puurinternet]

Hi @ngarnier

Thanks for the quick reply! Do you mean the mjml markup or the generated html? MJML is embedded below with linked images.

<mjml>
<mj-head>
  <mj-title>Villa ArenA Woonmall: Aanbiedingen</mj-title>
  <mj-attributes>
    <mj-all />
    <mj-text font-size="12" color="#000" font-family="Arial, sans-serif" />
  </mj-attributes>
</mj-head>
<mj-body>
  <mj-container>
    <mj-section background-color="#ee9124" full-width="full-width" padding="0">
      <mj-column>

        <mj-text font-size="18" color="#FFF" line-height="30px" text-transform="uppercase" letter-spacing="15" align="center">
          Aanbiedingen
        </mj-text>

      </mj-column>
    </mj-section>
    <mj-section padding="37px 0">
      <mj-column>
        <mj-image src="http://images.m4.mailplus.nl/ts/villaarena/Villa_ArenA_Aanbiedingen/images/logo.png" align="center" width="162" />
      </mj-column>
    </mj-section>
    <mj-section padding="0">
      <mj-column>
        <mj-text text-transform="uppercase" align="center">
          <h1 style="font-size:28px;font-weight:bold;"><span  style="color:#ee9124;">Voordeel</span> Bij Villa ArenA</h1>
        </mj-text>
        <mj-text align="center" font-size="18" line-height="26px" font-weight="bold">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip!</p>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding="5 0">
      <mj-raw><div class="MPED_CONTENTBLOCK"></mj-raw>
      <mj-column width="560">
        <mj-image src="http://images.m4.mailplus.nl/ts/villaarena/Villa_ArenA_Aanbiedingen/images/beterbed.jpg" />
      </mj-column>
      <mj-raw></div></mj-raw>
    </mj-section>
    <mj-section padding="5 0">
      <mj-raw><div class="MPED_CONTENTBLOCK"></mj-raw>
      <mj-column width="560" padding="0">
        <mj-image src="http://images.m4.mailplus.nl/ts/villaarena/Villa_ArenA_Aanbiedingen/images/brugman.jpg" width="560" />
      </mj-column>
      <mj-raw></div></mj-raw>
    </mj-section>
    <mj-section padding="5 0">
      <mj-raw><div class="MPED_CONTENTBLOCK"></mj-raw>
      <mj-column width="273">
        <mj-image src="http://images.m4.mailplus.nl/ts/villaarena/Villa_ArenA_Aanbiedingen/images/bruynzeel.jpg" />
      </mj-column>
      <mj-column width="16"></mj-column>
      <mj-column width="273">
        <mj-image src="http://images.m4.mailplus.nl/ts/villaarena/Villa_ArenA_Aanbiedingen/images/debommel.jpg" />
      </mj-column>
      <mj-raw></div></mj-raw>
    </mj-section>
    <mj-section padding="5 0">
      <mj-raw><div class="MPED_CONTENTBLOCK"></mj-raw>
      <mj-column width="560">
        <mj-image src="http://images.m4.mailplus.nl/ts/villaarena/Villa_ArenA_Aanbiedingen/images/voordeel.jpg" />
      </mj-column>
      <mj-raw></div></mj-raw>
    </mj-section>
    <mj-section padding="5 0">
      <mj-raw><div class="MPED_CONTENTBLOCK"></mj-raw>
      <mj-column width="560">
        <mj-image src="http://images.m4.mailplus.nl/ts/villaarena/Villa_ArenA_Aanbiedingen/images/sanders.jpg" />
      </mj-column>
      <mj-raw></div></mj-raw>
    </mj-section>
  </mj-container>
</mj-body>
</mjml>

[ngarnier]

Thanks for providing the MJML markup. Why not just remove the padding on mj-image by setting it to 0 :)?

Demo: https://mjml.io/try-it-live/SyfoPzo5e

[puurinternet]

Thanks, that should fix it yeah. Would you please consider not adding default padding to everything? I thought I had removed all default padding, but apparently I missed it on images.

[ngarnier]

Because it's used in several apps removing the default padding might break some templates but that's something we can consider in MJML 4.

It's really easy to reset all paddings, with <mj-all padding="0" />.

As my answer seems to solve your problem I'm closing the issue, feel free to respond if it's not the case!