在图象中的神奇空间在桌中 [英] mysterious space between images in a table

问题描述

可能重复：

html，css - weird invisible margin below pictures

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

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

我设置了宽度和高度，不知道那个奇怪的空白是从哪里来的。我也知道图像是正确的大小，并且在这里似乎没有任何填充或边缘问题，当我检查元素在chrome。

$ b这是因为你的图片默认是内联的，所以基本上他们的行为像文本，留下基线下的空间。您可以让他们阻止，如下所示：

  table img {
 display：block; 
} 
  

您可以在这里阅读更多信息：图片，表格和神秘的间隙 - 在MDN上

Possible Duplicate:
html, css - weird invisible margin below pictures

I'm working on this site: https://dl.dropbox.com/u/2241201/tivoli-animation/index.html

It's just a table with a bunch of <td><img src='' /></td>

I've set the width and height, but I don't know where that weird white space is coming from. I also know the images are the correct size, and there doesn't seem to be any padding or margin issues here when I inspect element in chrome.

解决方案

It happens because your images are inline by default, so basically they are acting like text, leaving space under the baseline. You could make them block, with something like this:

table img {
    display: block;
}

You can read more about this here: Images, Tables, and Mysterious Gaps - on MDN

这篇关于在图象中的神奇空间在桌中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！