【问题标题】: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#

      【讨论】: