小贝子编程

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;">&nbsp;
</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;">&nbsp;</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>有一个 20px 的填充。

/* ------------------------- 
------------
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;">&nbsp;
</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;">&nbsp;</td>
</tr>
</table>
</body>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium