html - 似乎无法将内容与单元格顶部对齐

Question

我正在设计的电子邮件出现问题。页眉和主图像未与单元格顶部对齐。我相信我已经删除了所有的填充(有一个图像单元格只出现在移动设备上，但删除单元格并没有删除空间)但是部分标题(健身)和正下方的内容之间仍然存在差距。

我附上了一张图片来说明我的意思。

如有任何帮助，我们将不胜感激。

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 &quot;Skipping&quot; 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>

Answer 1

将margin-top: 0;添加到带有heding的段落。

<p align="center" style="font-size: 50px;line-height: 50px;font-family: 'miso-bold';color: #666666;margin-top: 0;">Why "Skipping" Legs Is Better Than Hitting 1000 Steps</p>