我有一张 table ，中间有一张图片。但是在图像的底部和表格的其余行之间有一小段空白。我如何摆脱那个空白区域？
代码:
<!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"> </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"> </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"> </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"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
我尝试过更改高度、删除行，但似乎没有任何效果。任何帮助将不胜感激!
最佳答案
将 img 设置为 display: block。或 vertical-align: middle
关于html - 如何消除表格行中的空白？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17428889/