Huge spacing before prehead and between sections.

[refugeindhamma]

I'm new to MJML and just started using it to create very simple mostly text HTML emails. However, I'm facing an issue whereby there are huge spacings before the prehead, and also before & after dividers and sections as shown in the screenshot below. I tried using a template without any modifications and it still has the same problem. I was using Beefree.io previously and did not have this problem. How can I resolve this issue?

Edit: In the Header, I have also inserted <mj-section padding="0" /> into Attributes.

[iRyusa]

Please share the whole MJML we can't really help you.

…

Message ID: ***@***.***>

[refugeindhamma]

Hi, here's the code. Thanks for your help.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text font-family="Verdana,Geneva,sans-serif;" color="#000000" font-size="16px" line-height="1.5"></mj-text>
      <mj-section padding="0" />
    </mj-attributes>
    <mj-style inline="inline">a { color: inherit!important; text-decoration: none!important; } </mj-style>
  </mj-head>
  <mj-body background-color="#ffffff">
    <mj-section padding-bottom="0" padding-top="0">
      <mj-group>
        <mj-column>
          <mj-text align="left" font-size="14px">To ensure delivery to your inbox, please add [email protected] to your address book.</mj-text>
        </mj-column>
      </mj-group>
    </mj-section>
    <mj-section padding-top="0" padding-bottom="0">
      <mj-column>
        <mj-divider padding-top="0" padding-bottom="0" border-width="1px" border-style="solid" border-color="#000" />
      </mj-column>
    </mj-section>
    <mj-section padding-bottom="0px" text-align="center">
      <mj-column>
        <mj-image href="https://www.website.com" src="https://google.com" alt="logo" width="120px"></mj-image>
      </mj-column>
    </mj-section>
    <mj-section padding-top="0" padding-bottom="0">
      <mj-column>
        <mj-text align="center" font-size="30px" font-family="Arial Black,Arial Bold,Gadget,sans-serif;" color="#dd00ff" font-weight="bold">PROGRAMME<BR /><span style="align:center; font-size:30px; font-family:Arial Black,Arial Bold,Gadget,sans-serif;; color:#ff9900; font-weight:bold">2024</span></mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding-bottom="0px" padding-top="0px">
      <mj-column>
        <mj-text align="center">Welcome<BR /> You have <strong>successfully registered</strong> for the course.</mj-text>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-text align="center" font-size="25px" font-family="Arial Black,Arial Bold,Gadget,sans-serif;" color="#d145a6" font-weight="bold" padding-bottom="0px">Registration Details</mj-text>
        <mj-text align="center">You have registered #NUMBER seats:<BR><BR>#NAME1<BR>#NAME2 </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding-bottom="0" padding-top="0">
      <mj-column>
        <mj-text align="center" font-size="25px" font-family="Arial Black,Arial Bold,Gadget,sans-serif;" color="#d145a6" font-weight="bold" padding-bottom="0px">Location</mj-text>
        <mj-text align="center"><a href="https://goo.gl/maps" target="_blank"><span style="color: #33773B; text-decoration: none;"><u>ABC Building</u></span></a> <BR />USA<BR />(Clicking on the temple name above will enable you to see the map</mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding-top="0" padding-bottom="0">
      <mj-column>
        <mj-table>
          <tr>
            <td colspan="2" style="text-align:center; font-size:25px; font-family:Arial Black,Arial Bold,Gadget,sans-serif; color:#d145a6; font-weight:bold; padding:20px">Attendance</td>
          </tr>
          <tr>
            <td width="50%" style="font-size:16px; font-family:Verdana,Geneva,sans-serif; padding-bottom: 10px;"><strong>Please show this email to the course volunteers when you arrive to take attendance by scanning the QR code.</strong>
            </td>
            <td style="vertical-align:middle; text-align: center; padding-top:20px; padding-bottom:20px" rowspan="2" width="50%">#QRCODE </td>
          </tr>
          <tr>
            <td style="font-size:16px; font-family:Verdana,Geneva,sans-serif; padding-top:10px; padding-bottom:20px;">You will receive QR codes for upcoming lessons along with reminder emails one day prior to the scheduled lesson. </td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>
    <mj-section padding-top="0" padding-bottom="0">
      <mj-column>
        <mj-text align="center" font-size="25px" font-family="Arial Black,Arial Bold,Gadget,sans-serif;" color="#d145a6" font-weight="bold" padding-bottom="0px">Schedule</mj-text>
        <mj-text><strong>Every Monday 2000 to 2100 Hours</strong> at the following dates:</mj-text>
        <mj-table font-family="Verdana,Geneva,sans-serif;" font-size="16px">
          <tr>
            <th style="background-color:#2d3748; color: #ffffff; padding: 20px">Jan </th>
            <th style="padding:5"></th>
            <th style="background-color:#2d3748; color: #ffffff; padding: 20px">Feb </th>
            <th style="padding:5"></th>
            <th style="background-color:#2d3748; color: #ffffff; padding: 20px">Mar </th>
            <th style="padding:5"></th>
            <th style="background-color:#2d3748; color: #ffffff; padding: 20px">Apr </th>
            <th style="padding:5"></th>
            <th style="background-color:#2d3748; color: #ffffff; padding: 20px">May </th>
          </tr>
          <tr>
            <td style="padding:5"></td>
          </tr>
          <tr>
            <td style="background-color:#c3fffc; text-align:center; padding: 20px">01 </td>
            <td style="padding:5"></td>
            <td style="background-color:#fbe0a6; text-align:center; padding: 20px">05 </td>
            <td style="padding:5"></td>
            <td style="background-color:#c3fffc; text-align:center; padding: 20px">04</td>
            <td style="padding:5"></td>
            <td style="background-color:#fbe0a6; text-align:center; padding: 20px">01</td>
            <td style="padding:5"></td>
            <td style="background-color:#c3fffc; text-align:center; padding: 20px">06</td>
          </tr>
          <tr>
            <td style="padding:5"></td>
          </tr>
          <tr>
            <td style="background-color:#c3fffc; text-align:center; padding: 20px">08</td>
            <td style="padding:5"></td>
            <td style="background-color:#fbe0a6; text-align:center; padding: 20px">12 </td>
            <td style="padding:5"></td>
            <td style="background-color:#c3fffc; text-align:center; padding: 20px">11 </td>
            <td style="padding:5"></td>
            <td style="background-color:#fbe0a6; text-align:center; padding: 20px">08</td>
            <td style="padding:5"></td>
            <td style="background-color:#c3fffc; text-align:center; padding: 20px">13</td>
          </tr>
          <tr>
            <td style="padding:5"></td>
          </tr>
          <tr>
            <td style="background-color:#c3fffc; text-align:center; padding: 20px">15</td>
            <td style="padding:5"></td>
            <td style="background-color:#fbe0a6; text-align:center; padding: 20px">19 </td>
            <td style="padding:5"></td>
            <td style="background-color:#c3fffc; text-align:center; padding: 20px">16 </td>
            <td style="padding:5"></td>
            <td style="background-color:#fbe0a6; text-align:center; padding: 20px">15</td>
            <td style="padding:5"></td>
            <td style="background-color:#c3fffc; text-align:center; padding: 20px">20</td>
          </tr>
          <tr>
            <td style="padding:5"></td>
          </tr>
          <tr>
            <td style="background-color:#c3fffc; text-align:center; padding: 20px">22</td>
            <td style="padding:5"></td>
            <td style="text-align:center; padding: 20px">
            </td>
            <td style="padding:5"></td>
            <td style="background-color:#c3fffc; text-align:center; padding: 20px">26 </td>
            <td style="padding:5"></td>
            <td style="text-align:center; padding: 20px">
            </td>
            <td style="padding:5"></td>
            <td style="background-color:#c3fffc; text-align:center; padding: 20px">25 </td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>
    <mj-section padding-top="0" padding-bottom="0">
      <mj-column>
        <mj-text align="center" font-size="25px" font-family="Arial Black,Arial Bold,Gadget,sans-serif;" color="#d145a6" font-weight="bold" padding-bottom="0px">Goals</mj-text>
        <mj-text>This section outlines goals that the course aims to achieve.</mj-text>
        <mj-text>
          <ul>
            <li>1st goal<BR /><BR />
            </li>
            <li>2nd goal<BR /><BR />
            </li>
            <li>3rd goal</li>
          </ul>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding-top="0" padding-bottom="0">
      <mj-column>
        <mj-text align="center" font-size="25px" font-family="Arial Black,Arial Bold,Gadget,sans-serif;" color="#d145a6" font-weight="bold" padding-bottom="0px">Guidelines</mj-text>
        <mj-text>This section outlines a set of guidelines for participants to adhere to.</mj-text>
        <mj-text>
          <ul>
            <li>1st guideline</li>
            <ul>
              <li>2nd guideline</li>
              <li>3rd guideline </li>
              <li>4th guideline </li>
              <li>5th guideline</li>
              <li>6th guideline<BR /><BR />
              </li>
            </ul>
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding-bottom="60px">
      <mj-column>
        <mj-text align="center" font-size="25px" font-family="Arial Black,Arial Bold,Gadget,sans-serif;" color="#d145a6" font-weight="bold" padding-bottom="0px">Communication</mj-text>
        <mj-text>Please email us if you have any queries.</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

[iRyusa]

How did you send your test email ? Can you try with https://putsmail.com/ ?

[refugeindhamma]

I found out that it was caused by using the MJML App to export HTML. When I used VS Studio to export the HTML, the emails looked fine.

Thanks for your replies.