我正在创建 html templemate，因为我想发送一些邮件。但我有问题。在我的 templemate 左边是我认为的填充物。但是我不能删除它，我不知道如何删除它。我想让左边的元素像右边这样处于同一水平。你能帮助我吗？我很感激帮助。这对我来说非常重要。
<html>
<head>
<style type="text/css">
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
line-height: 100%;
}
#outlook a {
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
border-collapse: collapse;
}
.tablereset {
margin: 0 auto;
width: 640px !important;
line-height: 100% !important
}
.button {
margin: 0 auto !important;
}
.devicewidthsocial {
margin: 0 auto;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
td.boxesfont {
font-size: 17px !important;
font-family: 'Roboto', Arial, Helvetica, sans-serif!important
}
td[class*=font-resize] {
font-size: 140%!important
}
@media only screen and (max-width:640px) {
a[href="tel"],
a[href="sms"] {
text-decoration: none;
color: #ffffff;
pointer-events: none;
cursor: default;
}
tr.removemobile {
display: none;
}
td[class*=threecolumnphoto] {
padding-bottom: 20px;
}
table[class*=button] {
float: none;
}
table.removemobile {
display: none;
}
table.tablereset {
margin: 0 auto;
width: 440px !important;
line-height: 100% !important
}
table[class*=devicewidth] {
width: 440px!important;
text-align: center!important;
float: none!important;
display: table!important;
}
table[class*=devicewidthinner] {
width: 400px!important;
text-align: center!important;
float: none!important;
}
table[class*=devicewidthinner3] {
width: 173px!important;
float: none!important;
}
img[class*=logoImg] {
width: 110px!important;
height: auto!important;
}
}
@media only screen and (max-width:479px) {
table.removemobile {
display: none;
}
table[class*=tablereset] {
margin: 0 auto;
width: 280px !important;
line-height: 100% !important
}
img[class*=logoImg] {
width: 100px!important;
height: auto!important;
}
td[class*=threecolumnphoto] {
padding-bottom: 20px;
}
table[class*=devicewidthright] {
width: 160px!important;
}
table[class*=devicewidth] {
width: 280px!important;
float: none!important;
display: table!important;
}
table[class*=devicewidthinner] {
width: 240px!important;
float: none!important;
}
table[class*=devicewidthinner3] {
width: 173px!important;
float: none!important;
}
table[class*=button] {
float: none!important;
}
table[class*=button] td,
table[class*=button] td a {
font-size: 12px!important;
}
td[class*=oswaldfont] {
font-size: large!important;
}
}
</style>
</head>
<body style="margin:0; padding:0">
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="640">
<table class="devicewidth" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="58" width="640"> </td>
</tr>
<tr>
<td>
<p style="font-family:Open Sans; text-align: center; color: #606060;">Nowy outlet mebli tapicerowanych</p>
</td>
</tr>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="18" width="640"> </td>
</tr>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px; color:#b2b2b2;line-height: 18px;text-align: center;">
<div class="strike">
<span style="font-weight: bold; color: #606060;">Lorem ipsum <p style="font-weight: 400;">Lorem ipsum</p></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="20" width="640"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse; border: 1px solid #dddddd;" class="tablereset" align="center" cellpadding="10" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="640">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;">
<tbody>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="left" width="200">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Lorem ipsum</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Open Sans, Helvetica, sans-serif;font-weight: 700; font-size: 22px;line-height:24px; color: #606060; font-weight: bold; text-transform: uppercase;">Lorem ipsum </td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="1" valign="middle">
<span style="width:2px; height:80px; background:#ececec; margin-top: 70px; display:block;"></span>
</td>
<td width="317" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tbody>
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse; margin-top: 20px;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Open Sans, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Lorem ipsum
<span style="color: red;text-decoration: line-through;">
<span style="color: #606060; font-weight: bold; font-size: 20px;">
<span style="margin-left:5px;">$</span></span>
</span>
</td>
</tr>
<tr>
<td align="center" height="5" width="640"></td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Open Sans, Helvetica, sans-serif;font-weight: 300; font-size: 14px;line-height:24px;"><span style="font-weight: bold; color: #606060;">Lorem ipsum </span><span style="color: #e4001b; font-weight: bold; font-size: 18px; margin-left: 30px;">$</span></td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">
<p style="-webkit-margin-before: 0;-webkit-margin-after: 0; color: #606060; margin-top: 15px; font-weight: 400;">Wymiary:</p>
<p style="-webkit-margin-before: 0;-webkit-margin-after: 0; color: #606060; margin-top: 10px;"><span style="font-weight: bold;">Długość: </span><span style="margin-left: 15px;">188 cm</span></p>
<p style="-webkit-margin-before: 0;-webkit-margin-after: 0; color: #606060; margin-top: 2px;"><span style="font-weight: bold;">Szerokość: </span>  85 cm</p>
<p style="-webkit-margin-before: 0;-webkit-margin-after: 0; color: #606060; margin-top: 2px"><span style="font-weight: bold;">Wysokość: </span>  90 cm</p>
</td>
</tr>
</tbody>
</table>最佳答案
尝试添加这个:
table td {
border-collapse: collapse;
vertical-align: bottom;
}
我认为左边的元素和右边的元素在同一层级
关于html - 为什么我在左第一个 lorem ipsum 上方有填充？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46566295/