我的 HTML 签名未采用间距和格式

问题描述 投票：0回答：1

我对 HTML 有点陌生，很惊讶我能走到这一步。我用生成器制作了电子邮件签名，但是大小（不是字符，而是附加到电子邮件时的大小）太大。我想知道是否可以减少 30% 左右？另外，底部图片之间的间距应该更紧一些，以及enter image description here顶部图片和接触区域之间的间距更紧，更靠近我的姓名、职位和公司的线。这是一封测试电子邮件，显示了它的外观，以及图片中描述我想要做的事情的更多细节。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
   <HEAD>
      <TITLE>Email Signature</TITLE>
      <META content="text/html; charset=utf-8" http-equiv=Content-Type>
   </HEAD>
   <BODY style="font-size: 10pt; font-family: Arial, sans-serif;">
      <table cellspacing="0" cellpadding="0" border="0" style="FONT-FAMILY: Arial, sans-serif; COLOR: #000000;max-width:500px; background: transparent !important;">
         <tbody>
            <tr>
               <td colspan="2" width="500" style="padding-bottom: 4px; border-bottom: 1px solid #2f9aa3;"><span style="FONT-SIZE: 18pt; COLOR: #4d4e4f; FONT-FAMILY: Arial, sans-serif;"><strong>%%FirstName%% %%LastName%%</span><span><br></span><span style="font-size: 10pt; color: #4d4e4f;">%%Title%%<span>, <span style="font-size: 10pt; color: #4d4e4f !important; text-decoration:none ; font-weight: bold;">Test Company, Inc.</strong></span></a></span></td>
            </tr>
            <tr>
               <td width="120" style="padding-top: 22px;">
                  <p style="padding: 0px; margin: 0px;"> <img border="0" width="90" style="max-width:90px; height:auto; border:0;" src=""></p>
               </td>
               <td style="padding-top: 25px;">
                  <p style="padding-bottom: 2px; margin-bottom: 0px; padding-top: 0px; margin-top: 0px; line-height: 10pt; "><span style="font-size: 9pt; line-height: 10pt; color: #000000; font-weight: bold;">T: </span><span style="font-size: 9pt; line-height: 10pt; color: #000000">%%PhoneNumber%%</span></p>
                  <p style="padding-bottom: 2px; margin-bottom: 0px; padding-top: 0px; margin-top: 0px; line-height: 10pt; "><span style="font-size: 9pt; line-height: 10pt; color: #000000; font-weight: bold;">W: </span><span style="font-size: 9pt; line-height: 10pt; color: #000000">www.testsite.com</span></p>
                  <p style="padding-bottom: 2px; margin-bottom: 0px; padding-top: 0px; margin-top: 0px; line-height: 10pt; "><span style="font-size: 9pt; line-height: 10pt; color: #000000; font-weight: bold;">E: </span><a href="mailto:%%Email%%" style="text-decoration: none; font-size: 9pt; line-height: 10pt; color: #000000"><span style="text-decoration: none; font-size: 9pt; line-height: 10pt; color: #000000">%%Email%%</span></a></p>
                  <p style=" line-height: 10pt; padding-bottom: 2px; margin-bottom: 0px; padding-top: 0px; margin-top: 0px;"> <span style="font-size: 9pt; line-height: 10pt; color: #000000; font-weight: bold;">A:</span> <span style="font-size: 9pt; line-height: 10pt; color: #000000">111 test avenue Test NY</span><span style="font-size: 9pt; line-height: 10pt; color: #000000">, </span> <span style="font-size: 9pt; line-height: 10pt; color: #000000">11111</span></p>
                  <p style="margin-bottom: 0px; padding-bottom: 0px; padding-top: 0px; margin-top: 4px;"><span><a href="https://www.facebook.com/testsite/" target="\\\_blank" rel="noopener"><img border="0" width="20" style="border:0; height:20px; width:20px" src=""></a>\\\&nbsp;</span><span><a href="https://twitter.com/testsite?lang=en" target="\\\_blank" rel="noopener"><img border="0" width="20" style="border:0; height:20px; width:20px" src=""></a>\\\&nbsp;</span><span><a href="https://www.linkedin.com/company/testsite target="\\\_blank" rel="noopener"><img border="0" width="20" style="border:0; height:20px; width:20px" src=""></a>\\\&nbsp;</span><span><a href="https://www.instagram.com/testsite/" target="\\\_blank" rel="noopener"><img border="0" width="20" style="border:0; height:20px; width:20px" src=""></a>\\\&nbsp;</span> </p>
               </td>
            </tr>
            <tr>
               <td colspan="2" style="padding-top:20px; margin-bottom:0;"><a href="www.testsite.com" target="\\\_blank" rel="noopener"><img border="0" width="500" style="max-width:500px; height:auto; border:0;" src=""></a></td>
            </tr>
         </tbody>
      </table>
   </BODY>
</HTML>

我正在尝试调整间距和尺寸，但我担心这会破坏整体尺寸和画面。我删除了所有 imgur 链接，因为我的帖子被标记为垃圾邮件

html email outlook office365 html-email
1个回答
0
投票

进行此类调整的简单方法是将代码保存为 .html 文件，然后在浏览器中打开它。大多数都会有一个“检查元素”工具，您可以在其中查看填充和边距或创建间距的其他参数。

为了使社交媒体图标更接近图像（左），请调整此 td 中的宽度：

<td width="120" style="padding-top: 22px;">
。

要缩小中间部分和线上方的间隙，请调整该线和下一个 td 上的 padding-top (

<td style="padding-top: 25px;">
)。

要在所有内容之上添加更多空间，请将 padding-top 添加到第一个 

<td>
，即这个：
<td colspan="2" width="500" style="padding-bottom: 4px; border-bottom: 1px solid #2f9aa3;">
即 
<td colspan="2" width="500" style="padding-bottom: 4px; border-bottom: 1px solid #2f9aa3;padding-top:30px;">

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.