MailChimp制作新闻通讯：HTML文本框下移动端图片留白去除咨询

针对你在MailChimp中遇到的移动端图片底部空白问题，在仅能使用HTML文本框的限制下，可通过以下几种方法解决：

• 修改父元素与图片样式（优先尝试）
  邮件客户端的<p>标签默认带有边距、行高，且图片默认是inline-block属性，两者结合容易产生底部空白。直接调整代码如下：

  <p style="text-align: center; margin: 0; padding: 0; line-height: 0;">
    <img src="imagine there's a link here" alt="crane image" style="display: block; width: 100%; height: auto;" />
  </p>
  

  关键调整点：

  • 给<p>标签添加margin:0; padding:0; line-height:0;，清除所有默认间距
  • 图片设置display:block;，彻底消除inline元素的基线对齐空白
  • 将height="100%"改为height:auto;，避免移动端图片拉伸变形

• 移除<p>标签，改用更简洁的居中方式
  如果<p>标签的默认样式仍有残留问题，直接移除它，用图片自身的外边距实现居中：

  <img src="imagine there's a link here" alt="crane image" style="display: block; margin: 0 auto; width: 100%; height: auto;" />
  

  这种方式减少了父元素的样式干扰，在多数邮件客户端中表现更稳定。

• 添加font-size:0作为额外保险
  部分移动端邮件客户端会因父元素的字体大小产生微小空白，可给父元素补充font-size:0;：

  <p style="text-align: center; margin: 0; padding: 0; line-height: 0; font-size: 0;">
    <img src="imagine there's a link here" alt="crane image" style="display: block; width: 100%; height: auto;" />
  </p>
  

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