似乎无法将内容对齐到单元格顶部
问题描述：
遇到了我正在设计的电子邮件问题。标题和主图像未对齐到单元格的顶部。我相信我已经删除了所有的填充（有一个图片的单元格只出现在移动设备上，但删除单元格并没有删除空格），但段标题（FITNESS）和正下方的内容之间仍然存在差距。似乎无法将内容对齐到单元格顶部
我附上了一张图片，显示我的意思。
任何帮助将不胜感激。
CSS
[![<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-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; }
/* iOS BLUE LINKS */
a\[x-apple-data-detectors\] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
@font-face {
font-family: 'miso-regular';
src: url('fonts/miso-regular-webfont.woff2') format('woff2'),
url('fonts/miso-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'miso-bold';
src: url('fonts/miso-bold-webfont.woff2') format('woff2'),
url('fonts/miso-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* MOBILE STYLES */
@media screen and (max-width: 600px) {
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.img-float {
display:block;
float:none;
margin:0 auto 20px !important;
}
.max-width {
max-width: 100% !important;
}
.mobile-wrapper {
width: 85% !important;
max-width: 85% !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
.mobile-hide {
display: none !important;
}
}
@media screen and (min-width: 600px) {
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
.mobile-show {
display: none !important;
}
}
/* ANDROID CENTER FIX */
div\[style*="margin: 16px 0;"\] { margin: 0 !important; }
</style>][1]][1]
HTML
<table border="0" bgcolor="#e8ebee" cellpadding="0" cellspacing="0" width="100%" style="max-width: 550px;" class="responsive-table">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!-- ARTICLE TITLE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="padding: 0px 5px 0 5px; line-height: 25px; font-family: 'Stardos Stencil', Arial, sans-serif; font-size:15px; color: #98a4ae; text-transform: uppercase;" class="padding">FITNESS</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- ARTICLE IMAGE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding: 0 0 0 0; color: #666666;" class="padding"><img alt="insert alt text here" class="img-max mobile-show" height="264" src="images/article-long-mobile.png" style="display: block; font-family: sans-serif; font-size: 16px; color: #999999;" width="100%"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- ARTICLE COPY -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="padding: 0 5px -20px 5px; font-size: 16px; line-height: 20px; font-family: 'Noto Serif', serif; color: #666666; vertical-align:top" class="padding"><div style="vertical-align: top"><!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="160" align="right" style="width:160px;"><tr><td style="padding:0 0 20px 20px;">
<![endif]-->
<img alt="insert alt text here" class="img-max mobile-hide img-float" src="images/article-long.png" align="right" style="display: block; font-family: sans-serif; font-size: 16px; color: #999999; vertical-align: top; Margin:0 0 20px 20px;" width="200px">
<!--[if mso]>
</td></tr></table>
<![endif]-->
<p align="center" style="font-size: 50px; line-height: 50px; font-family: 'miso-bold'; color: #666666;">Why "Skipping" Legs Is Better Than Hitting 1000 Steps</p><p align="center" style="padding: 0 5px 20px 5px; font-size: 20px; line-height: 20px; font-family: 'miso-regular'; color: #98a4ae;" class="padding">Whether you squat or snatch, press or curl, biggest hitters or resistance hitters</p></div>
Runti iur aute di blaccum et qui odi oditia sa dem quibus vento cum aut aut volor sitempo ribusae consequos et idenis alia dia diti ant mi, occum consequi nonet od excepel iquatiorpore liquatur, nia nam eossitas poribusda nimagnis alibus, ute vellor moloriori dis et adit volorio. Iliquid modia doluptati ipicaes ipiendunt ex et incimustrume eariatati ditatem porentist apiendit, od eos as eicimpore eniet ad que deliquatem.Runti iur aute di blaccum et qui odi oditia sa dem quibus vento cum aut aut volor sitempo ribusae consequos et idenis alia dia diti ant mi, occum consequi nonet od excepel iquatiorpore liquatur, nia nam eossitas poribusda nimagnis alibus, ute vellor moloriori dis et adit volorio. Iliquid modia doluptati ipicaes ipiendunt ex et incimustrume eariatati ditatem porentist apiendit, od eos as eicimpore eniet ad que deliquatem.Runti iur aute di blaccum et qui odi oditia sa dem quibus vento cum aut aut volor sitempo ribusae consequos et idenis alia dia diti ant mi, occum consequi nonet od excepel iquatiorpore liquatur, nia nam eossitas poribusda nimagnis alibus, ute vellor moloriori dis et adit volorio. Iliquid modia doluptati ipicaes ipiendunt ex et incimustrume eariatati ditatem porentist apiendit, od eos as eicimpore eniet ad que deliquatem.Runti iur aute di blaccum et qui odi oditia sa dem quibus vento cum aut aut volor sitempo ribusae consequos et idenis alia dia diti ant mi, occum consequi nonet od excepel iquatiorpore liquatur, nia nam eossitas poribusda nimagnis alibus, ute vellor moloriori dis et adit volorio. Iliquid modia doluptati ipicaes ipiendunt ex et incimustrume eariatati ditatem porentist apiendit, od eos as eicimpore eniet ad que deliquatem.Runti iur aute di blaccum et qui odi oditia sa dem quibus vento cum aut aut volor sitempo ribusae consequos et idenis alia dia diti ant mi, occum consequi nonet od excepel iquatiorpore liquatur, nia nam eossitas poribusda nimagnis alibus, ute vellor moloriori dis et adit volorio. Iliquid modia doluptati ipicaes ipiendunt ex et incimustrume eariatati ditatem porentist apiendit, od eos as eicimpore eniet ad que deliquatem.Runti iur aute di blaccum et qui odi oditia sa dem quibus vento cum aut aut volor sitempo ribusae consequos et idenis alia dia diti ant mi, occum consequi nonet od excepel iquatiorpore liquatur, nia nam eossitas poribusda nimagnis alibus, ute vellor moloriori dis et adit volorio. Iliquid modia doluptati ipicaes ipiendunt ex et incimustrume eariatati ditatem porentist apiendit, od eos as eicimpore eniet ad que deliquatem.Runti iur aute di blaccum et qui odi oditia sa dem quibus vento cum aut aut volor sitempo ribusae consequos et idenis alia dia diti ant mi, occum consequi nonet od excepel iquatiorpore liquatur, nia nam eossitas poribusda nimagnis alibus, ute vellor moloriori dis et adit volorio. Iliquid modia doluptati ipicaes ipiendunt ex et incimustrume eariatati ditatem porentist apiendit, od eos as eicimpore eniet ad que deliquatem.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>
你可以给我带图像的项目吗？我会尽我所能.... – Maruf
这段代码很混乱。 **提示：**不要使用表格做布局。 **提示2：**您几乎从不需要在CSS中使用*！important *指令。 – eldes
谢谢玛鲁夫的邀请，虽然АндрейЛобанов已经为我修好了。另外@eldes你是不是使用表格做布局是什么意思？这是我一般建立电子邮件的方式。 – Schro