这是HTML电子邮件的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
@media only screen and (max-width: 740px) {
#wrapper {
width: 100% !important;
}
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
border-spacing: 0;
}
a {
font-family: Arial;
font-size: 14px;
line-height: 22px;
text-decoration: none;
color: #ff8000;
}
p {
font-family: Arial;
font-size: 14px;
line-height: 22px;
color: #797571;
}
span {
font-family: Arial;
font-size: 18px;
line-height: 18px;
color: #383635;
}
small {
color: #9f9d9d;
font-family: Arial;
font-size: 12px;
line-height: 18px;
}
img {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table id="wrapper" align="center" width="740" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td background="http://nineseven.ru/html/transsertiko/img/email-bg.png" bgcolor="#f5f5f5" width="740" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:740px;">
<v:fill type="tile" src="http://nineseven.ru/html/transsertiko/img/email-bg.png" color="#f5f5f5" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="55">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
<td height="55">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
<td height="55">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
</tr>
<tr>
<td width="118">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
<td height="130" style="vertical-align: top;">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
<img src="http://nineseven.ru/html/transsertiko/img/logo-mobile.png" border="0"
width="240" height="50" style="display: block" alt="Транссертико" />
</td>
<td width="118">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
</tr>
<tr>
<td width="118">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
<td height="60" style="vertical-align: top;">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
<h1 style="font-family: Arial; font-size: 24px; line-height: 24px; color: #383635; font-weight: normal;">Здравствуйте, Иван!</h1>
</td>
<td width="118">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
</tr>
<tr>
<td width="118">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
<td style="vertical-align: top;">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
<p>Мы очень рады, что Вы присоединились к числу клиентов Транссертико!
Дарим Вам <a href="#">скидку 5%</a> на первый заказ, чтобы поскорее познакомиться поближе!</p>
</td>
<td width="118">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
</tr>
<tr>
<td width="118" height="170">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
<td style="vertical-align: middle;">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
<p>С уважением,<br>
Холдинговая Компания<br>
ТРАНССЕРТИКО</p>
</td>
<td width="118">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
</tr>
<tr style="background: #ededed;" height="100">
<td width="118" height="170">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/indent.gif" border="0"
width="1" height="1" style="display: block" />
</div>
</td>
<td style="line-height: 1px; font-size: 0em;">
<table align="left" cellpadding="0" cellspacing="0" border="0" style="height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;font-size: 0em;">
<tr>
<td width="50" valign="top">
<img src="http://nineseven.ru/html/transsertiko/img/email-tel.png" border="0"
width="28" height="28" style="display: block" alt="Телефон"/>
</td>
<td width="200">
<span>+7 495 617-61-16</span><br />
<small>Многоканальный</small>
</td>
<td>
<span>8 800 700-61-17<span><br />
<small>Бесплатно по России</small>
</td>
</tr>
<tr>
<td width="50" valign="bottom">
<img src="http://nineseven.ru/html/transsertiko/img/email-mail.png" border="0"
width="28" height="28" style="display: block" alt="Телефон"/>
</td>
<td width="200" height="50" colspan="2" valign="bottom">
<span style="font-family: Arial; font-size: 14px; line-height: 20px; color: #9f9e9d;">E-mail: </span> <a href="#" style="text-decoration: underline;">[email protected]</a>
</td>
</tr>
</table>
</td>
<td width="112" valign="bottom" align="right">
<div style="margin: 0; padding: 0; line-height: 0;">
<img src="http://nineseven.ru/html/transsertiko/img/email-footer-bg.png" border="0"
width="112" height="128" style="display: block" />
</div>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
该电子邮件在每种浏览器中看起来都不错，但是在#container和Outlook 2007底部的表之间有一个多余的空间。我试图添加
mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size: 0em;
到那张桌子，但没有成功。我还尝试将vertical-align属性添加到包含tr和td。：（ 请帮忙！
也许您可以从这里获得一些帮助Outlook在HTML电子邮件中添加空间
另外，我认为您应该删除div并将样式放在td上。一些电子邮件客户端不喜欢表格内的html标签。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句