为什么在img和td之间插入5px [重复]

Question

这个问题已经在这里有了答案：

• 如何避免img和td底部之间出现白线？ 1个答案

这是代码：

小提琴

我相信我已经删除了所有间距，但是td仍然为305px ，而img为300px height 。

即使我尝试：

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

Answer 1

因为img是一个内联元素，并且具有vertical-align:baseline所以会产生间隙。

因此，您可以：

• display:block在img display:block

或设置

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

Answer 2

img是inline元素，默认情况下，它在底部不需要额外的像素。 使用display: block img删除此空间：

table img {
    display: block;
}