html - 无法消除表之间的空格

This question already has answers here:

Get rid of space underneath inline-block image [duplicate]
                                
                                    （2个答案）
                                
                        
                                2年前关闭。
            
                    
我有一封电子邮件，其中有一个空间我不想在那里，而且我也不知道该如何摆脱它。我想摆脱绿色标题图片与其下方的黑色表之间的空间，该表显示客户见解团队|咨询反馈

这是一个可以在其中测试的codepen：

https://codepen.io/anon/pen/QBqXGx#anon-login

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" class="m_-5007286684501546704MsoNormalTable" style="width:487.5pt;background:white;border-collapse:collapse;background-position:initial initial;background-repeat:initial initial" width="650">
    <tbody>
        <tr>
            <td style="width:100.0%;padding:0in 0in 0in 0in" width="100%">
            <div align="center">
            <table border="0" cellpadding="0" cellspacing="0" class="m_-5007286684501546704MsoNormalTable" style="width:100.0%;border-collapse:collapse" width="100%">
                <tbody>
                    <tr>
                        <td style="width:100.0%;padding:0in 0in 0in 0in" valign="top" width="100%">&nbsp;</td>
                    </tr>
                </tbody>
            </table>
            </div>
            </td>
        </tr>
    </tbody>
</table>
</div>

<div align="center" class="MsoNormal" style="text-align:center"><img src="https://jdasoftware.co1.qualtrics.com/CP/Graphic.php?IM=IM_4Oa3ahlN6yaNL8N" style="height: 142px; width: 650px;" /></div>

<div class="a6S" dir="ltr" style="opacity: 0.01; left: 1629.3px; top: 305.562px;">
<div aria-label="Save attachment to Drive image001.jpg" class="T-I J-J5-Ji aQv T-I-ax7 L3 a5q" data-tooltip="Save to Drive" data-tooltip-class="a1V" id=":2xf" role="button" tabindex="0">
<div class="wtScjd J-J5-Ji aYr aQu">
<div class="T-aT4" style="display: none;">
<div>&nbsp;</div>
</div>
</div>
</div>
</div>

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" class="m_-5007286684501546704MsoNormalTable" id="m_-5007286684501546704email_directive_module" style="width:487.5pt;background:#dddddd;border-collapse:collapse;background-position:initial initial;background-repeat:initial initial" width="650">
    <tbody>
        <tr>
            <td style="width:100.0%;padding:0in 0in 0in 0in;background-position:initial initial;background-repeat:initial initial" width="100%">
            <div align="center">
            <table border="0" cellpadding="0" cellspacing="0" class="m_-5007286684501546704MsoNormalTable" style="width:100.0%;border-collapse:collapse;background-position:initial initial;background-repeat:initial initial" width="100% padding:0px">
                <tbody>
                    <tr>
                        <td style="width:100.0%;background:#231f20;padding:4.5pt 15.0pt 4.5pt 15.0pt;background-position:initial initial;background-repeat:initial initial" valign="top" width="100%">
                        <p class="MsoNormal" style="text-align:center;line-height:13.5pt"><span style="font-size:10.5pt;font-family:&quot;Arial&quot;,sans-serif;color:white">CUSTOMER INSIGHTS TEAM | CONSULTING FEEDBACK</span></p>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            </td>
        </tr>
    </tbody>
</table>

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" class="m_-5007286684501546704MsoNormalTable" id="m_-5007286684501546704PrimaryAlertModule" style="width:487.5pt;background:white;border-collapse:collapse;background-position:initial initial;background-repeat:initial initial" width="650">
    <tbody>
        <tr>
            <td style="width:100.0%;padding:0in 0in 0in 0in" width="100%">
            <div align="center">
            <table border="0" cellpadding="0" cellspacing="0" class="m_-5007286684501546704MsoNormalTable" style="width:100.0%;border-collapse:collapse" width="100%">
                <tbody>
                    <tr>
                        <td style="width:100.0%;padding:15.0pt 15.0pt 15.0pt 15.0pt" valign="top" width="100%">
                        <table border="0" cellpadding="0" cellspacing="0" class="m_-5007286684501546704MsoNormalTable" style="width:100.0%;border-collapse:collapse" width="100%">
                            <tbody>
                                <tr>
                                    <td style="padding:.75pt .75pt .75pt .75pt">
                                    <p class="m_-5007286684501546704paragraph" style="margin:0in;margin-bottom:.0001pt;vertical-align:baseline">${date://CurrentDate/FL}<br />
                                    <br />
                                    Thank you for agreeing to be a part of our User Acceptance Testing (UAT) consulting group!<br />
                                    <br />
                                    Project Type: ${e://Field/project_type__c}<br />
                                    Survey Type: ${e://Field/jem_phase__c}<br />
                                    Project Name: ${e://Field/jces_project_name__c}<br />
                                    <br />
                                    Follow this link to the Survey<br />
                                    ${l://SurveyLink?d=Take the survey}<br />
                                    <br />
                                    Or copy and paste the URL below into your internet browser:<br />
                                    ${l://SurveyURL}<br />
                                    <br />
                                    Follow the link to opt out of future emails:<br />
                                    ${l://OptOutLink?d=Click here to unsubscribe}<br />
                                    <br />
                                    <span class="m_-5007286684501546704normaltextrun"><span style="font-size:12.0pt;font-family:&quot;Calibri Light&quot;,sans-serif;background:white">---------------------------------------------------------------------<br />
                                    <br />
                                    Hello CONTACT @ COMPANY,</span></span><span class="m_-5007286684501546704eop"><span style="font-size:12.0pt;font-family:&quot;Calibri Light&quot;,sans-serif">&nbsp;</span></span></p>

                                    <p class="m_-5007286684501546704paragraph" style="margin:0in;margin-bottom:.0001pt;vertical-align:baseline;word-wrap:break-word"><span class="m_-5007286684501546704normaltextrun"><span style="font-size:12.0pt;background:white">&nbsp;</span></span></p>

                                    <p class="m_-5007286684501546704paragraph" style="margin:0in;margin-bottom:.0001pt;vertical-align:baseline"><span class="m_-5007286684501546704normaltextrun"><span style="font-size:12.0pt;font-family:&quot;Calibri Light&quot;,sans-serif;background:white">JDA Consulting Services recently completed a consulting engagement with your organization. I would like to take this opportunity to thank you for your business and request your feedback on our services. </span></span></p>

                                    <p class="m_-5007286684501546704paragraph" style="margin:0in;margin-bottom:.0001pt;vertical-align:baseline"><span class="m_-5007286684501546704normaltextrun"><span style="font-size:12.0pt;font-family:&quot;Calibri Light&quot;,sans-serif;background:white">&nbsp;</span></span></p>

                                    <p class="m_-5007286684501546704paragraph" style="margin:0in;margin-bottom:.0001pt;vertical-align:baseline"><span class="m_-5007286684501546704normaltextrun"><span style="font-size:12.0pt;font-family:&quot;Calibri Light&quot;,sans-serif;background:white">Your input helps us to improve our service delivery and address any concerns which you may have. Our short engagement survey will take approximately 5 minutes to complete. The survey will remain open for 21 days from the date of this invitation. </span></span></p>

                                    <p class="m_-5007286684501546704paragraph" style="margin:0in;margin-bottom:.0001pt;vertical-align:baseline"><span class="m_-5007286684501546704normaltextrun"><span style="font-size:12.0pt;font-family:&quot;Calibri Light&quot;,sans-serif;background:white">&nbsp;&nbsp;&nbsp;</span></span></p>

                                    <p class="m_-5007286684501546704paragraph" style="margin:0in;margin-bottom:.0001pt;vertical-align:baseline"><span class="m_-5007286684501546704normaltextrun"><span style="font-family:&quot;Calibri Light&quot;,sans-serif;background:white">DISPLAY PRIMARY QUESTION</span></span></p>

                                    <p class="m_-5007286684501546704paragraph" style="margin:0in;margin-bottom:.0001pt;vertical-align:baseline"><span class="m_-5007286684501546704normaltextrun"><span style="background:white">&nbsp;</span></span></p>

                                    <p class="m_-5007286684501546704paragraph" style="margin:0in;margin-bottom:.0001pt;vertical-align:baseline"><span class="m_-5007286684501546704normaltextrun"><span style="font-size:12.0pt;font-family:&quot;Calibri Light&quot;,sans-serif;background:white">Thank you for your time,</span></span></p>

                                    <p class="m_-5007286684501546704paragraph" style="margin:0in;margin-bottom:.0001pt;vertical-align:baseline"><span class="m_-5007286684501546704normaltextrun"><span style="font-size:12.0pt;font-family:&quot;Calibri Light&quot;,sans-serif;background:white">&nbsp;</span></span></p>

                                    <p class="m_-5007286684501546704paragraph" style="margin:0in;margin-bottom:.0001pt;vertical-align:baseline"><span class="m_-5007286684501546704normaltextrun"><span style="font-size:12.0pt;font-family:&quot;Calibri Light&quot;,sans-serif;background:white">CLIENT PARTNER @ JDA SOFTWARE</span></span></p>

                                    <p class="m_-5007286684501546704paragraph" style="margin:0in;margin-bottom:.0001pt;vertical-align:baseline"><span class="m_-5007286684501546704normaltextrun"><span style="font-size:12.0pt;font-family:&quot;Calibri Light&quot;,sans-serif;background:white">&nbsp;</span></span></p>

                                    <p class="m_-5007286684501546704paragraph" style="margin:0in;margin-bottom:.0001pt;vertical-align:baseline"><span class="m_-5007286684501546704normaltextrun"><span style="font-size:12.0pt;font-family:&quot;Calibri Light&quot;,sans-serif;background:white">INCLUDE SIGNATURE</span></span></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding:.75pt .75pt .75pt .75pt">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td style="padding:.75pt .75pt .75pt .75pt">
                                    <table align="left" border="0" cellpadding="0" cellspacing="0" class="m_-5007286684501546704MsoNormalTable" style="border-collapse:collapse">
                                        <tbody>
                                            <tr>
                                                <td style="padding:0in 0in 0in 0in">&nbsp;</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            </td>
        </tr>
    </tbody>
</table>
</div>

<p align="center" class="MsoNormal" style="text-align:center"><span style="font-size:13.5pt;font-family:&quot;Arial&quot;,sans-serif;color:black">&nbsp;</span></p>

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" class="m_-5007286684501546704MsoNormalTable" id="m_-5007286684501546704InlineCTAModule" style="width:487.5pt;background:#004f71;border-collapse:collapse;background-position:initial initial;background-repeat:initial initial" width="650">
    <tbody>
        <tr>
            <td style="width:100.0%;padding:0in 0in 0in 0in" width="100%">&nbsp;</td>
        </tr>
    </tbody>
</table>
</div>

<p align="center" class="MsoNormal" style="text-align:center"><span style="font-size:13.5pt;font-family:&quot;Arial&quot;,sans-serif;color:black">&nbsp;</span></p>

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" class="m_-5007286684501546704MsoNormalTable" id="m_-5007286684501546704footersection" style="width:487.5pt;background:white;border-collapse:collapse;background-position:initial initial;background-repeat:initial initial" width="650">
    <tbody>
        <tr>
            <td style="width:472.5pt;padding:7.5pt 7.5pt 7.5pt 7.5pt" width="630">
            <table align="left" border="0" cellpadding="0" cellspacing="0" class="m_-5007286684501546704MsoNormalTable" style="width:80.0%;border-collapse:collapse" width="80%">
                <tbody>
                    <tr>
                        <td style="padding:0in 0in 0in 0in">
                        <p class="MsoNormal"><a data-saferedirecturl="https://www.google.com/url?q=http://www.jda.com/privacy-policy&amp;source=gmail&amp;ust=1532203651666000&amp;usg=AFQjCNH-oiWZdFEZkD8j9YPBfvF2iQuQsQ" href="http://www.jda.com/privacy-policy" target="_blank"><span style="font-size:7.0pt;font-family:&quot;Arial&quot;,sans-serif;color:#00b7f1">Privacy Policy</span></a><span class="m_-5007286684501546704mkteditable"><span style="font-size:7.0pt;font-family:&quot;Arial&quot;,sans-serif">,&nbsp;</span></span><a data-saferedirecturl="https://www.google.com/url?q=http://www.jda.com/terms-of-use&amp;source=gmail&amp;ust=1532203651666000&amp;usg=AFQjCNGgG4qtoYVmpyFDg0QFgFokW58peA" href="http://www.jda.com/terms-of-use" target="_blank"><span style="font-size:7.0pt;font-family:&quot;Arial&quot;,sans-serif;color:#00b7f1">Terms of Use</span></a><span class="m_-5007286684501546704mkteditable"><span style="font-size:7.0pt;font-family:&quot;Arial&quot;,sans-serif">&nbsp;| Copyright &copy; 2018 JDA Software Group, Inc. All rights reserved.</span></span></p>
                        </td>
                    </tr>
                </tbody>
            </table>

            <table align="right" border="0" cellpadding="0" cellspacing="0" class="m_-5007286684501546704MsoNormalTable" style="width:.5in;border-collapse:collapse" width="48">
                <tbody>
                    <tr>
                        <td style="padding:0in 0in 0in 0in">
                        <p class="MsoNormal"><img alt="http://now.jda.com/rs/jdasoftware/images/BLANK-Email-Footer-Logo.jpg" border="0" class="CToWUd" data-image-whitelisted="" height="30" id="m_-5007286684501546704Picture_x0020_1" src="https://mail.google.com/mail/u/0?ui=2&amp;ik=9fdce0568b&amp;attid=0.2&amp;permmsgid=msg-f:1606541371002645716&amp;th=164b94dd7794ecd4&amp;view=fimg&amp;sz=w1600-h1000&amp;attbid=ANGjdJ-2K826Gq_BJVDjovduFLxMa4wGgIUfupX_YfNodI2_gc_qopXWucqi3hZD90ryOdpu3Y1Nak2eCijcwDYv3bYVaTK_ooZN8yZyFELBjHePHH1v7FuTyb1TsIs&amp;disp=emb" style="width:.5in;height:.3166in" width="48" /></p>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
</div>

<p align="center" class="MsoNormal" style="text-align:center"><span style="font-family:&quot;-webkit-standard&quot;,serif;display:none">&nbsp;</span></p>

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" class="m_-5007286684501546704MsoNormalTable" id="m_-5007286684501546704footerbar" style="width:487.5pt;background:white;border-collapse:collapse;background-position:initial initial;background-repeat:initial initial" width="650">
    <tbody>
        <tr style="height:3.75pt">
            <td style="width:487.5pt;background:#00b7f1;padding:0in 0in 0in 0in;height:3.75pt;background-position:initial initial;background-repeat:initial initial" width="650">&nbsp;</td>
        </tr>
    </tbody>
</table>
</div>

<p align="center" class="MsoNormal" style="text-align:center">&nbsp;</p>
${l://OptOutLink?d=Click here to unsubscribe}

<p>&nbsp;</p>
</div>

最佳答案

将vertical-align: top添加到该图像上的CSS规则。内联元素中还有用于下级文本元素的间隙，例如j，g，y

<img src="https://jdasoftware.co1.qualtrics.com/CP/Graphic.php?IM=IM_4Oa3ahlN6yaNL8N" style="height: 142px; width: 650px; vertical-align:top;" />

关于html - 无法消除表之间的空格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51564838/