如何消除表格行中的空白？

我有一张桌子，中间有一张图片。但图像底部和其余表格行之间有一小块白色空间。我如何摆脱这个空白空间？如何消除表格行中的空白？

代码：

<!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>

我试图改变高度，删除行，似乎没有任何工作。任何帮助将不胜感激！

来源

2013-07-02 Alex

[空间在底部的包含图像的空间]可能的副本（http://stackoverflow.com/questions/11868905/space-at-bottom-of-div-containing-image） – cimmanon

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

来源

2013-07-02 14:59:12 kalley

嘿，非常感谢，这解决了问题！它在浏览器中效果很好，但是当我将它作为电子邮件发送时，现在图像上方有一些白色空间？任何想法如何摆脱这一点呢？ – Alex

不完全确定。但对于HTML电子邮件，您应该确保尽可能在图像上指定宽度和高度。如果Outlook不知道尺寸，Outlook有时会拉伸它。没有保证可以解决问题。 – kalley

将'style =“margin：0; border：0; padding：0; display：block;”'添加到电子邮件的图像标记中。如果它是''中唯一的东西，它将删除所有的空白区域。 @Alex – John

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

为什么？图片站在底线，就像文字，所以对于像字母下方缺口：P，F，G ......

来源

2013-07-02 15:01:28

你可以尝试margin:0;和display: block;该列在那里你拿着那张照片;

来源

2013-07-02 15:49:41

如何消除表格行中的空白？

回答

相关问题