如何摆脱 Outlook 中 HTML td 和 table 之间的额外 space？
How to get rid of extra space between HTML td and table within in Outlook?
这是 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;">dostavka@dtod.ru</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 底部的 table 之间有一个额外的 space。
我试着添加
mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size: 0em;
那个table但是没有成功。我还尝试添加垂直对齐属性以包含 tr 和 td。 :( 请帮忙！
也许你可以从这里得到一些帮助Outlook adding space in HTML email
此外，我认为您应该删除 div 并将样式放在 td 上。一些电子邮件客户端不喜欢表格内的 html-标签。
这是 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;">dostavka@dtod.ru</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 底部的 table 之间有一个额外的 space。 我试着添加
mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size: 0em;
那个table但是没有成功。我还尝试添加垂直对齐属性以包含 tr 和 td。 :( 请帮忙！
也许你可以从这里得到一些帮助Outlook adding space in HTML email
此外，我认为您应该删除 div 并将样式放在 td 上。一些电子邮件客户端不喜欢表格内的 html-标签。