Html 如何设置<；td>；与一个<；img>；

我正在尝试使用

对齐html中的一些图像。我不希望图像之间有空白。以下是我到目前为止的进展：。我在两个棕色盒子之间还有一些空白

我将图像放在

下：

---

棕色框是128x128，但我的

是128x132。我已经检查了我的

td

的

padding

和

border

都是零。为什么我的

td

比我的

img

高？我如何将我的

设置为与我的

完全相同的大小？

诀窍是

垂直对齐：中间

因为图像是作为内联元素对齐的，所以它们的行为与普通字符（如字母）非常相似。如果将其对齐到线条的中间，间隙将神奇地消失。查看更新的

您可以专门针对表内或站点范围内的图像更改此设置（我在启动新项目时总是这样做，如果我没有弄错的话，请重置。css和html5样板文件等，也可以这样做）

编辑

从这些评论中，我了解到需要一些解释，所以让我们看看

首先看一下第一段（带下划线的一行）。如果你看“悬挂字母”（例如“g”、“p”和“y”），你会注意到字符的一部分实际上“悬挂”在线条下。但是“角色底部”实际上被认为比角色的最低视觉部分高一点。字符由“普通”字符的下半部分对齐，例如字母“c”、“h”、“a”等

现在你问自己，你的。。。这与图像有关吗？嗯，基本上，图像的处理与字符差不多，只要它们是对齐的

内联的

。但这也意味着，在带有文本（或内联元素）的行中，为字符的“挂起部分”保留了一点空间，正如我们在段落（带有字符“AgH”的段落）周围再次绘制方框时所看到的那样

现在你可以得到一个线索了，因为我之前说过，内联图像的处理是相同的。因为，浏览器还保留了一点空间，以防你在图像中加入悬挂部分！当然，这是胡说八道，因为图像永远不会从盒子里出来，但浏览器不在乎。这就是为什么需要显式对齐图像

我又举了三个例子，一个文本对齐到顶部，一个对齐到中间，一个对齐到底部。正如您在未对齐的段落中所看到的，保留了“悬挂部分”的空间，但没有保留对齐版本的空间，因为现在图像的最低部分实际上被处理为元素的最低可能边缘

我希望这能消除“魔力”，让你更好地理解它：）

---

还有一点需要注意的是：尽管图像上的

display:block

可能有效，但这被认为是一种不好的做法，因为图像并不总是需要显示为块元素（这意味着它跨越了容器的整个宽度，前后都有一个换行符）。因此，如果您想一劳永逸地修复它，只需在样式表顶部的某个地方使用这个小片段：

img{vertical align:middle；}

将显示块添加到css中就可以了：

例如

---

由于img是一个内联元素，td在底部为其他内联元素“保留”一行。因此，您有两种解决方案：

td {
    line-height: 0;
}

或：

---

这并不是说它马上就有帮助，而是说你的HTML是无效的。你有一个tr作为一个孩子的直系子女td@LeeTaylor是的，首先修复html语法。您可以解释一下，为什么它会这样做。因为，根据我的基本理解，垂直对齐使垂直对齐居中，但它将如何占据所有td空间。我已经做了广泛的解释，我希望它能澄清问题！然后，不需要垂直对齐，特别是，我们可以使用任何对齐方式，但我们需要确保使用一些对齐方式。好的，很好的解释。多谢各位@giorgio@Azeez几乎：对齐文本底部、超级等会产生不想要的结果（对于此特定/一般用例）。而

vertical align:middle

是通用的“reset.css”类解决方案的最佳选择，因为它最接近于您通常希望图像在一行文本中的行为方式。如果您想让它上下对齐，您可以覆盖该特定（一组）元素的css

td img { vertical-align: middle; } /* Only images inside tables */
/* OR */
img { vertical-align: middle; } /* fixes it for the whole site */

img { display:block; }

td {
    line-height: 0;
}

img {
    display: block;
}