我准备html模板，我得到一个问题。当我在gmail中打开它时，我得到了额外的空白。从外观上看，它是正常工作的。我认为需要在head中添加一些依赖项，但不知道是哪一个。
应该是这样的:［![1]][1]
这是它在gmail中的样子:［![2]][2]
下面是我的html代码:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>Reset password email</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
table { font-family: 'Poppins';}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
</head>
<body
style="
background: #ffffff;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Poppins';
"
>
<table
align="left"
cellpadding="0"
cellspacing="0"
style="
border: 0;
background: #ffffff;
width: 412px !important;
height: 436px;
"
>
<tbody>
<tr>
<td
style="
padding: 64px 0 0 53px;
font-weight: 500;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 123px;
"
>
Zapomniałeś hasła ?
</td>
</tr>
<tr>
<td
style="
padding: 14px 0 0 53px;
font-weight: 400;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 313px;
"
>
Aby zresetować hasło, proszę kliknąć w poniższy link:
</td>
</tr>
<tr>
<td
style="
border-radius: 3px;
background-color: #ffffff;
display: table-cell;
text-align: left;
vertical-align: middle;
"
>
<a
href="#"
style="
text-decoration: none;
font-weight: 500;
font-size: 12px;
color: #ffffff;
line-height: 30px;
background-color: #232835;
margin-left: 51px;
margin-top: 7px;
padding: 6px 36px 6px 36px;
border-radius: 3px;
letter-spacing: -2%;
"
>RESETUJ HASŁO</a
>
</td>
</tr>
<tr>
<td
style="
padding: 13px 0 0 53px;
font-weight: 400;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 316px;
"
>
W razie problemów skontaktuj się z administratorem
</td>
</tr>
<tr>
<td
style="
padding: 9px 0 0 53px;
font-weight: 500;
font-size: 12px !important;
line-height: 18px;
height: 54px;
width: 140px;
"
>
Imię Nazwisko </br>
500 500 500 </br>
admin@nevomo.com
</td>
</tr>
<tr>
<td
style="
padding: 17px 0 0 53px;
font-weight: 400;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 84px;
"
>
Pozdrawiamy,
</td>
</tr>
<tr>
<td>
<img
src="https://i.ibb.co/YhtGLnf/nevomo-logo-orange.png" alt="nevomo-logo-orange" border="0"
style="
width: 112.17px;
height: 15.74px;
padding: 12.13px 0 0 56.41px;
color: #eb5d1c;
"
alt="logo"
/>
</td>
</tr>
<tr>
<td
style="
padding: 7.6px 0 64px 53px;
font-weight: 400;
font-size: 11px !important;
line-height: 16.5px;
height: 51px;
width: 206px;
"
>
ul.Mińska 63A lok.245 </br>
03-828 Warszawa </br>
www | facebook | instagram | linkedin
</td>
</tr>
</tbody>
</table>
</body>
</html>
如何解决这个问题?
我不确定，但很有可能gmail正在读取html中的换行符并在电子邮件中添加换行符。它不一定与浏览器一样，会忽略额外的空白。电子邮件中的HTML则不同。
所以试着改成这样(不要在结束标签前添加换行符)
<td
style="padding: 7.6px 0 64px 53px;
font-weight: 400;
font-size: 11px !important;
line-height: 16.5px;
height: 51px;
width: 206px;">
或关闭所有换行符(最安全)
<td style="padding: 7.6px 0 64px 53px; font-weight: 400; font-size: 11px !important; line-height: 16.5px; height: 51px; width: 206px;">
需要换行时使用<br />