HTML邮件签名尺寸缩小与间距调整技术求助

一、整体缩小30% #

• 优先用整体缩放法：找到签名最外层的容器（通常是<div>或<table>），直接给它加内联样式：

  <div style="transform: scale(0.7); transform-origin: top left;">
    <!-- 你的签名内容 -->
  </div>
  

  transform: scale(0.7)会把整个容器缩小到原尺寸的70%，transform-origin: top left保证缩放从左上角开始，不会偏移位置，这个方法不会破坏内部布局，适配大部分主流邮件客户端。
• 若部分老客户端不支持transform，就手动调整所有元素：
  • 图片：给每个<img>加style="width: 原宽度*0.7; height: auto;"，比如原宽度是100px，就改成width:70px，height:auto保持比例不变。
  • 文字：给所有文本容器加style="font-size: 原字号*0.7;"，比如原字号14px，改成font-size:10px（取整便于维护）。

二、调整各区域间距 #

所有间距调整都用内联样式，避免邮件客户端忽略样式：

• 顶部图片 ↔ 姓名职位栏：给顶部图片加style="margin-bottom: 3px;"（数值按需调整，比如原间距10px，改成3-5px）；或者给姓名职位栏容器加style="margin-top: 3px;"。
• 顶部图片 ↔ 联系区域：给联系区域容器加style="margin-top: 4px;"，缩小上边距即可。
• 底部图片间距：如果是底部图片和上方内容的间距，给底部图片加style="margin-top: 2px;"；如果是底部图片自身的下边距，调整margin-bottom到合适数值。

注意事项 #

邮件客户端对CSS支持有限，所有样式必须写在元素的style属性里，不要用<style>标签或外部样式表，否则大概率会被过滤失效。

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