Question

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

我正在使用此网站：https://dl.dropbox.com/u/2241201/tivoli-animation/index.html

这只是一张包含<td><img src='' /></td>

的表格

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

Answer 1

之所以发生这种情况是因为您的图像默认是内联的，所以基本上它们就像文本一样，在基线下留下空间。您可以使用以下内容block制作它们：

table img {
    display: block;
}

您可以在此处详细了解：Images, Tables, and Mysterious Gaps - on MDN

Answer 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

Answer 3

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

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

表中图像之间的神秘空间

3 个答案: