表格中图像之间的神秘空间[重复]答案

【问题标题】：mysterious space between images in a table [duplicate]表格中图像之间的神秘空间[重复]
【发布时间】：2012-08-18 12:09:38
【问题描述】：

可能重复：
html, css - weird invisible margin below pictures

我在这个网站上工作：https://dl.dropbox.com/u/2241201/tivoli-animation/index.html

只是一张桌子，上面有一堆<td><img src='' /></td>

我已经设置了宽度和高度，但我不知道那个奇怪的空白是从哪里来的。我也知道图像的大小是正确的，当我在 chrome 中 inspect element 时，这里似乎没有任何填充或边距问题。

【问题讨论】：

标签： html css layout

【解决方案1】：

这是因为你的图片默认是内联的，所以基本上它们就像文本一样，在基线下留下空间。你可以让他们block，像这样：

table img {
    display: block;
}

您可以在此处阅读更多信息：Images, Tables, and Mysterious Gaps - on MDN

【讨论】：

做到了，谢谢！一旦允许我会接受答案（从现在起 5 分钟）

【解决方案2】：

尝试将 DOCTYPE 部分更改为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

你也可以检查这个： http://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails

【讨论】：

【解决方案3】：

我不会尝试教你正确的 html 网页设计，但表格实体并不像你正在使用的那样用于页面组织。查看这些幻灯片以了解正确的浮动/定位、页面部分和 html 框模型。

http://www.cs.washington.edu/education/courses/cse190m/12su/lectures/slides/lecture05-float.shtml#

【讨论】：