0
遇到了我正在設計的電子郵件問題。標題和主圖像未對齊到單元格的頂部。我相信我已經刪除了所有的填充（有一個圖片的單元格只出現在移動設備上，但刪除單元格並沒有刪除空格），但段標題（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