为什么5px的插入IMG和TD

我相信我已经删除了所有的间距，但td仍然305px和img是300pxheight。

即使我尝试：

<td height="300"> 
    <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300"> 
</td>

或

<tr height="300">

在含<tr>。

这完全被忽略，td停留在305px？

来源

2016-06-21 grgwrw

您是否使用过任何CSS？如果你还没有，那么在HTML表格中有一些默认的填充。当我打开你的小提琴，并选择具有奇数填充的元素;我注意到还有一个字体大小的设置。我将其更改为0px，它似乎可以修复您的奇数填充。 [Imgur]（https://i.imgur.com/H36LrNX.png） –

因为img是内联元素，因此有vertical-align:baseline因此产生了差距。

所以你要么可以：

display:block在img

或设置

vertical-align:bottom

而且你不需要2 style秒的标签，也不需要用新属性复制body规则，只需将所有规则放在一个body规则中即可。

注意：如果您为html-email创建此项目，这是非内联的CSS（大于body），某些电子邮件客户端（例如gmail）会剥离它，请确保将其全部内联，或者使用一些收费会为你做到这一点。

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Battersea Studios</title> 
 
    <style type="text/css"> 
 
    #outlook a { 
 
     padding: 0; 
 
    } 
 
    body { 
 
     width: 100% !important; 
 
     margin: 0; 
 
     padding: 0; 
 
     font-family: Arial; 
 
     -webkit-font-smoothing: antialiased; 
 
     -webkit-text-size-adjust: none; 
 
     -ms-text-size-adjust: none; 
 
     text-size-adjust: none; 
 
    } 
 
    .ReadMsgBody { 
 
     width: 100%; 
 
    } 
 
    .ExternalClass { 
 
     width: 100%; 
 
    } 
 
    table { 
 
     border-collapse: collapse; 
 
     border-spacing: 0; 
 
    } 
 
    img { 
 
     height: auto; 
 
     line-height: 100%; 
 
     outline: none; 
 
     text-decoration: none; 
 
     border: 0; 
 
     display: block 
 
    } 
 
    a { 
 
     border: 0; 
 
    } 
 
    hr { 
 
     width: 20px; 
 
     text-align: left 
 
    } 
 
    a { 
 
     text-decoration: none; 
 
     color: white; 
 
    } 
 
    a:hover { 
 
     text-decoration: underline; 
 
     cursor: pointer; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <table cellspacing="0" cellpadding="0" align="center" style="width:600px;font-size:20px"> 
 
    <tr> 
 
     <td> 
 
     <table cellspacing="0" cellpadding="0" style="color:white;"> 
 
      <tr> 
 
      <td> 
 
       <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300"> 
 
      </td> 
 
      <td style="background-color:#E66977;vertical-align:top;"> 
 
       <table cellspacing="0" cellpadding="0" align="center" width="240"> 
 
       <tr> 
 
        <td> 
 
        <img src="imgs/spacer-pink.jpg" alt=""> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
        <strong>urtyryhry</strong> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
        <img src="imgs/spacer-pink.jpg" alt=""> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
        ryhryhjtyhjty 
 
        <br>tyjtyjtyjty 
 
        </td> 
 
       </tr> 
 
       </table> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td style="background-color:#1EA553;vertical-align:top;"> 
 
       <table cellspacing="0" cellpadding="0" align="center" width="240"> 
 
       <tr> 
 
        <td> 
 
        <img src="imgs/spacer-green.jpg" alt=""> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
        <strong>F</strong> 
 
        </td> 
 
        <tr> 
 
        <td> 
 
         <img src="imgs/spacer-green.jpg" alt=""> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         rthrthrth 
 
         <br>ryhryhryht 
 
         <br>hryhryhryt 
 
        </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
      <td> 
 
       <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300"> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
       <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300"> 
 
       </td> 
 
       <td style="background-color:#EA752E;vertical-align:top;"> 
 
       <table cellspacing="0" cellpadding="0" align="center" width="240"> 
 
        <tr> 
 
        <td> 
 
         <img src="imgs/spacer-orange.jpg" alt=""> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <strong>rtyryry</strong> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         <img src="imgs/spacer-orange.jpg" alt=""> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td> 
 
         rryu56u 
 
         <br>ryuryuy 
 
         <br>uryuryuyrt 
 
         <br>ytyutyuty 
 
        </td> 
 
        </tr> 
 
       </table> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
</body> 
 

 
</html>

来源

2016-06-21 11:25:53 dippas

img是inline元素，它在默认情况下呈现底部一些额外的像素。使用display: block为img删除此空间：

table img { 
    display: block; 
}

来源

2016-06-21 11:26:42

为什么5px的插入IMG和TD

回答

相关问题