如何消除表格行中的空白？
[英]How to eliminate white space in table row?
问题描述
I have a table with an image in the middle of it. 
我有一张桌子，中间有一张图片。 But there is a small sliver of white space between the bottom of the image and the rest of the table rows. 但是，在图像底部和其余表格行之间有一小部分空白。 How do I get rid of that white space? 我如何摆脱空白？
Code: 码：
<!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>
I have tried changing the height, deleting rows, nothing seems to work. 我试过更改高度，删除行，似乎没有任何效果。 Any help would be greatly appreciated! 任何帮助将不胜感激！
3 个解决方案
解决方案1
0 2013-07-02 14:59:12
set the img to display: block . 将img设置为display: block 。 or vertical-align: middle 或vertical-align: middle
解决方案2
0 2013-07-02 15:01:28
img {vertical-align:top; /* or bottom*/}
Why ? 为什么呢 Image stands on baseline, just like text, so there that gap underneath for letters like : p,f,g ... 图片位于文字的基线上，就像文本一样，因此在下面的间隙中存在字母：p，f，g ...
解决方案3
0 2013-07-02 15:49:41
you can try margin:0; 您可以尝试margin:0; and display: block; 并display: block; for that column where you are holding that picture; 对于您持有该图片的那列；
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.