html - html电子邮件中的布局
问题描述
我使用了一个 html 电子邮件模板并对其进行了修改，但电子邮件在顶部显示有一个大的白边。我该如何减少这个？我正在使用 android 邮件客户端来接收邮件，并且在页面的顶部和顶部（主题栏）之间，有太多的边距（空白。我想把整个事情带到页面的顶部
/* -------------------------
------------
INLINED WITH
htmlemail.io/inline
----------------------------
--------- */
/* -------------------------
------------
RESPONSIVE AND MOBILE
FRIENDLY STYLES
----------------------------
--------- */
@media only screen and (max- width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img- responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------
------------
PRESERVE THESE STYLES IN THE
HEAD
----------------------------
--------- */
@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}<body class="" style="background-color:
#f6f6f6; font-family: sans-
serif; -webkit-font.
smoothing: antialiased;
font-size: 14px; line-
height: 1.4; margin: 0;
padding: 0; -ms-text-size-
adjust: 100%; -webkit-text-s
size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background.
color: #f6f6f6;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
</td>
<td class="container" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top;
display: block; Margin: 0
auto; max-width: 580px;
padding: 10px; width:
580px;">
<div class="content" style="box-sizing: border.
box; display: block;
Margin: 0 auto; max-width:
580px; padding: 10px;">
<!-- START CENTERED WHITE
CONTAINER -->
<span class="preheader" style="color: transparent;
display: none; height: 0;
max-height: 0; max-width: 0;
opacity: 0; overflow:
hidden; mso-hide: all;
visibility: hidden; width:
0;">Post an ad today and
start selling your unwanted
items.</span>
<table class="main" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background:
#ffffff; border-radius:
3px;">
<!-- START MAIN CONTENT AREA
-->
<tr>
<td class="wrapper" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top; box-
sizing: border-box; padding:
20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
<p style="font-family: sans-
serif; font-size: 14px;
font-weight: normal; margin:
0; Margin-bottom: 15px;">.
</p>
<p style="font-family: sans-
serif; font-size: 14px;
font-
weight: normal; margin: 0;
Margin-bottom: 15px;">.
<center><img src="http://adsler.co.uk/wp-
content/uploads/2019/
07/Photo_1563667417091.png" alt="Useful alt text" width="300" height="60" border="0" style="border:0;
outline:none; text.
decoration:none;
display:block;"><br><br>.
</center>
Hey there and welcome to Adsler. Just in case you didn't know, you can also post ads for property, jobs, items wanted or for sale, motors, mobile phones and much more. </p>
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"><br><br>
<center>
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;"> <a href="https://adsler.co.uk" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;"
rel="https://adsler.co.uk noopener noreferrer">Post Today</a> </td>
</tr>
</tbody>
</center>
</table>
</td>
</tr>
</tbody>
</table>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Just Click the button</p>
</center>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Happy posting.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
<span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Adsler.co.uk, 49a-49b Friern Barnet Road.</span>
<br>
<a href="https://adsler.co.uk/contact" style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;"></a>.
</td>
</tr>
<tr>
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
<a href="https://adsler.co.uk" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;"></a>.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
</tr>
</table>
</body>变化的例子..
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-
family: sans-serif; font-size:
14px; vertical-align: top; box-
sizing: border-box; padding: 0
20px;">
<table border="0" cellpadding="0"
cellspacing="0" style="border.
collapse:
separate; mso-table-lspace: 0pt;
mso-table-rspace: 0pt; width:
100%;">
<tr>
<td style="font-family: sans-serif;
font-size: 14px; vertical-align:
top;">
<center><img
src="http://adsler.co.uk/wp--
content/uploads/2019/07/Ph
oto_1563667417091.png" alt="Useful
alt text" width="300" height="60"
border="0" style="border:0;
outline:none; text-decoration:none;
display:block;"><br><br></center>
Hey there and welcome to Adsler.
Just in case you didn't know, you
can also post ads for property,
jobs, items wanted or for sale,
motors, mobile phones and much
more.
<table border="0" cellpadding="0"
cellspacing="0" class="btn bt
解决方案
<p>您的标题图像上方有几个空标签，周围<td>有 20 像素的填充。
/* -------------------------
------------
INLINED WITH
htmlemail.io/inline
----------------------------
--------- */
/* -------------------------
------------
RESPONSIVE AND MOBILE
FRIENDLY STYLES
----------------------------
--------- */
@media only screen and (max- width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img- responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------
------------
PRESERVE THESE STYLES IN THE
HEAD
----------------------------
--------- */
@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}<body class="" style="background-color:
#f6f6f6; font-family: sans-
serif; -webkit-font.
smoothing: antialiased;
font-size: 14px; line-
height: 1.4; margin: 0;
padding: 0; -ms-text-size-
adjust: 100%; -webkit-text-s
size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background.
color: #f6f6f6;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
</td>
<td class="container" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top;
display: block; Margin: 0
auto; max-width: 580px;
padding: 10px; width:
580px;">
<div class="content" style="box-sizing: border.
box; display: block;
Margin: 0 auto; max-width:
580px; padding: 10px;">
<!-- START CENTERED WHITE
CONTAINER -->
<span class="preheader" style="color: transparent;
display: none; height: 0;
max-height: 0; max-width: 0;
opacity: 0; overflow:
hidden; mso-hide: all;
visibility: hidden; width:
0;">Post an ad today and
start selling your unwanted
items.</span>
<table class="main" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%; background:
#ffffff; border-radius:
3px;">
<!-- START MAIN CONTENT AREA
-->
<tr>
<td class="wrapper" style="font-family: sans-
serif; font-size: 14px;
vertical-align: top; box-
sizing: border-box; padding:
0 20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
separate; mso-table-lspace:
0pt; mso-table-rspace: 0pt;
width: 100%;">
<tr>
<td style="font-family:
sans-serif; font-size: 14px;
vertical-align: top;">
<center><img src="http://adsler.co.uk/wp-
content/uploads/2019/
07/Photo_1563667417091.png" alt="Useful alt text" width="300" height="60" border="0" style="border:0;
outline:none; text.
decoration:none;
display:block;"><br><br>.
</center>
<p style="font-family: sans-
serif; font-size: 14px;
font-
weight: normal; margin: 0;
Margin-bottom: 15px;">Hey there and welcome to Adsler. Just in case you didn't know, you can also post ads for property, jobs, items wanted or for sale, motors, mobile phones and much more. </p>
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
<tbody>
<tr>
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"><br><br>
<center>
<tbody>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;"> <a href="https://adsler.co.uk" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;"
rel="https://adsler.co.uk noopener noreferrer">Post Today</a> </td>
</tr>
</tbody>
</center>
</table>
</td>
</tr>
</tbody>
</table>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Just Click the button</p>
</center>
<center>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Happy posting.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
<span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Adsler.co.uk, 49a-49b Friern Barnet Road.</span>
<br>
<a href="https://adsler.co.uk/contact" style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;"></a>.
</td>
</tr>
<tr>
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
<a href="https://adsler.co.uk" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;"></a>.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
</tr>
</table>
</body>推荐阅读
- javascript - ChartJS：datalabels：在饼图中显示百分比值
- html - HTML/CSS 边框不缩放，角保持可见
- reverse-proxy - 更改 traefik 的领域 / AuthName
- maven - osx jenkins homebrew安装——maven和java配置
- php - 用 PHP 删除 HTML 元素类名？
- dart - 颜色变化时颤动不渲染
- phpmyadmin - 在 ubuntu 18.04 中安装 phpmyadmin 时显示错误
- reactjs - 在 React-native 中导入 api
- css - 更改博客标题的链接悬停颜色 - Avada
- java - 如何根据设备有效地改变布局