如何在MJML中创建顶部居中的80px宽120px高蓝色盒子？

你遇到的问题是因为<mj-section>默认会占满整个页面宽度，直接设置宽高属性不会生效。要实现顶部居中、80px宽120px高的蓝色盒子，需要通过嵌套结构来控制尺寸，具体修改后的代码如下：

<mjml>
  <mj-body>
    <mj-section text-align="center">
      <mj-columns>
        <mj-column width="80px" background-color="#009fe3" height="120px">
          <!-- 空文本元素确保高度生效，部分邮件客户端需要内容支撑 -->
          <mj-text>&nbsp;</mj-text>
        </mj-column>
      </mj-columns>
    </mj-section>
  </mj-body>
</mjml>

核心修改点： #

• 在外层<mj-section>添加text-align="center"，让内部容器整体居中。
• 用<mj-column>作为蓝色盒子的载体，直接设置width="80px"和height="120px"定义尺寸，同时设置background-color="#009fe3"实现蓝色背景。
• 内部添加<mj-text>&nbsp;</mj-text>是为了兼容部分邮件客户端，避免因无内容导致高度不生效。

如果担心height属性在某些客户端不兼容，也可以用内边距来替代高度设置：

<mj-column width="80px" background-color="#009fe3">
  <mj-text padding-top="55px" padding-bottom="55px">&nbsp;</mj-text>
</mj-column>

通过上下内边距的总和（55+55）加上文本默认行高，刚好接近120px的高度，兼容性更好。

内容的提问来源于stack exchange，提问作者John