0

我有一张桌子,中间有一张图片。但是在图像底部和表格的其余行之间有一小块空白。我如何摆脱那个空白?

代码:

<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<html>
<head>
</head>
<body>

  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="21">&nbsp;</td>
                                            <td>
                                                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td height="17" width="204" valign="top" bgcolor="#971502" background="http://quarterpoker.com/images/welcome_email/content-bg.jpg" style="border: solid 1px #d3594e; 
                    -webkit-border-top-left-radius: 8px;
                    -khtml-border-radius-topleft: 8px;  
                    -moz-border-radius-topleft: 8px;
                    border-top-left-radius: 8px;
                    -webkit-border-top-right-radius: 8px;
                    -khtml-border-radius-topright: 8px; 
                    -moz-border-radius-topright: 8px;
                    border-top-right-radius: 8px;
                    border-bottom: none;"> </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="19">&nbsp;</td>
                                        </tr>
                                    </table>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td height="38" align="center">
                                                <table width="170" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td valign="top" height="38">
                                                            <img src="http://quarterpoker.com/images/welcome_email/ribbon.jpg"/>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="20">&nbsp;</td>
                                            <td>
                                                <table width="100%" border="0" cellpadding="20" cellspacing="0">
                                                    <tr>
                                                        <td width="204" valign="top" bgcolor="#971502" background="http://quarterpoker.com/images/welcome_email/content-bg.jpg" style="margin-top: -5px;border: solid 1px #d3594e; 
                    -webkit-border-bottom-left-radius: 8px;
                    -khtml-border-radius-bottomleft: 8px;   
                    -moz-border-radius-bottomleft: 8px;
                    border-bottom-left-radius: 8px;
                    -webkit-border-bottom-right-radius: 8px;
                    -khtml-border-radius-bottomright: 8px;  
                    -moz-border-radius-bottomright: 8px;
                    border-bottom-right-radius: 8px;
                    border-top: none;">
                                                           <repeater>
                                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                    <tr>
                                                                        <td class="side">
                                                                            <p style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; margin-top: 0px; margin-bottom: 12px; padding: 0px; color: #fff ">To ensure you receive all of our email messages in your inbox and with images displayed, please add our email address to your contact list.</p>
                                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                                <tr>
                                                                                    <td valign="middle" height="30"> <img src="http://quarterpoker.com/images/welcome_email/line3.png" width="144" height="10" /></td>
                                                                                </tr>
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </repeater>
                                                            <ul style="padding: 0; margin: 0; list-style: none;">
                                                            <tableofcontents>
                                                                <li><repeatertitle /></li>
                                                            </tableofcontents>
                                                            </ul>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="19">&nbsp;</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>

                        </body>
                        </html>

我试过改变高度,删除行,似乎没有任何效果。任何帮助将不胜感激!

4

3 回答 3

0
img {vertical-align:top; /* or bottom*/}

为什么 ?图像站在基线上,就像文本一样,所以下面的字母有间隙:p,f,g ...

于 2013-07-02T15:01:28.030 回答
0

将 img 设置为display: block. 或者vertical-align: middle

于 2013-07-02T14:59:12.933 回答
0

您可以尝试在您持有该图片的那一列margin:0;display: block;

于 2013-07-02T15:49:41.237 回答