我是个新手，所以如果这个问题非常简单，我提前道歉。
我正在做一个HTML邮件，并试图尽可能地保持CSS的内联。我已经附上了我的代码链接，因为它是现在的。https:/codepen.iochaser87penxxZEdEX。
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>News of Note</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Learn the latest! ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<img src="Email Template/img/header2.jpg" width="600px"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem Khaled Ipsum is a major key to success. We the best. We the best. In life there will be road blocks but we will over come it. We the best. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! They don’t want us to win. To succeed you must believe. When you believe, you will succeed. We don’t see them, we will never see them. Give thanks to the most high. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! Surround yourself with angels. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up.</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="1" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="38%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--CONTENT-->
<img src="Email Template/img/600x600.jpg" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="1" cellpadding="0" cellspacing="0" width="58%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<!--CONTENT-->
<span><h3>Take a Tour!</h3>
</span>
<p>
Lorem Khaled Ipsum is a major key to success. We the best. We the best. In life there will be road blocks but we will over come it. We the best. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! They don’t want us to win.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="58%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<!--CONTENT-->
<span><h3>A Top-Rated Restaurant</h3>
</span><p>
Lorem Khaled Ipsum is a major key to success. We the best. We the best. In life there will be road blocks but we will over come it. We the best. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! They don’t want us to win. To succeed you must believe. When you believe, you will succeed. We don’t see them, we will never see them. Give thanks to the most.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="38%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<img src="Email Template/img/600x600.jpg" width="225">
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 0px 0px; vertical-align: top;"><span style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'">More Useful Links</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
我想不通如何让该栏目中的 "带你游！"和正文文案垂直对齐到顶部。我缺少了什么？
这封邮件完全是用表格构建的，所以我为我的代码状态道歉。谁能给我一些建议？谢谢！我是个新手，所以我的代码很糟糕。
这是因为你使用了一个 h3 来包装 "Take a Tour!"，默认情况下，它具有一个 margin-top (也是一个 margin-bottom). 只需将它们声明为 0 你的句子就会上升到顶部!
你可以在你的CSS部分做。
h3 {
margin-top: 0px;
margin-bottom: 0px;
}
或内联。
<h3 style="margin-top:0px;margin-bottom:0px;">Take a Tour!</h3>
这里是更新工作 编码笔.
希望能帮到你