求助：Pardot模板在Gmail中图片下方出现6px额外空白的解决方法

问题 #

开发Pardot模板时，仅能在Gmail中测试，发现每张图片底部被自动添加6px缓冲区域。因模板用了有色背景，图片后方会出现清晰的细小白色空白条。已确认图片设置为600×300，但实际渲染尺寸是600×306，找不到代码里的问题根源，求解决办法。

相关代码 #

<td align="left" style="color:rgb(80,80,80);font-family:Arial;font-size:14px;line-height:21px;text-align:left;padding:0px"><img alt="" border="0" height="300" src="https://ci3.googleusercontent.com/proxy/X5vxonJ4LTJOIE_yqa7KPF1Q4vegN__F42lSZer12QaJPjl0e8ZdaKiCeUrYtg0UCN02hx-RkiStzH5lGhiMgI4pthDVAxOrl47N--7fyQqGVnaE-fPb5YwG3tNM-BoE2yxfbRShtN4V9mGwAOB9x4x5ERGzgSzxz1Tf7qzk_GfVSlOb=s0-d-e1-ft#https://go.homesforhomes.org.au/l/915451/2022-01-09/f5fgf/915451/1641777130w6z6vs90/600x300_image_placeholder.png" style="width:600px;height:300px;border-width:0px;border-style:solid" width="600" class="CToWUd a6T" tabindex="0"><div class="a6S" dir="ltr" style="opacity: 0.01; left: 562px; top: 1436px;"><div id=":bn" class="T-I J-J5-Ji aQv T-I-ax7 L3 a5q" role="button" tabindex="0" aria-label="Download attachment " data-tooltip-class="a1V" data-tooltip="Download"><div class="akn"><div class="aSK J-J5-Ji aYr"></div></div></div></div></td>

问题说明 #

截图显示图片底部存在明显的白色空白条，与有色背景形成对比。

解决思路 #

• 给图片添加display:block样式：Gmail中图片默认是行内元素，会预留行间距空间。在图片的style属性里加入display:block;，强制图片以块级元素渲染，直接消除底部额外的6px空间。修改后的图片代码示例：

  <img alt="" border="0" height="300" src="你的图片链接" style="width:600px;height:300px;border-width:0px;border-style:solid;display:block;" width="600">
  

• 设置vertical-align:bottom：如果不想改变图片的元素类型，可在图片的style中添加vertical-align:bottom;，让图片与容器底部对齐，抵消行内元素的默认间距。
• 给容器设置line-height:0或font-size:0：给包含图片的<td>元素添加line-height:0;或font-size:0;样式，消除行高、字体大小带来的额外空间。注意如果<td>内还有文本内容，需要单独给文本重新设置对应的样式。
• 隐藏Gmail自动注入的元素：代码中的.a6S是Gmail自动添加的下载按钮容器，即便透明度极低也可能占据空间。可以在模板中添加全局样式覆盖：.a6S { display:none !important; }，避免其影响布局。

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