Question

我正在尝试使用<table>在html中对齐一些图像。我希望图像之间没有空白区域。到目前为止，这是我的进展：JSFiddle example。我仍然在两个棕色盒子之间留下一些空白区域。

我将图片放在<td>下：

<td>
     <img src="..."/>
</td>

棕色框是128x128，但我的<td>是128x132。我检查过padding border和td都是零。为什么我的td比img更高，如何将<td>设置为与<img>完全相同的尺寸？

Answer 1

技巧是vertical-align: middle！

因为图像对齐为内联元素，所以它们的行为非常像普通字符，例如字母。如果你将它对齐在线的中间，那么间隙将神奇地消失。查看更新后的Fiddle

您可以专门为表格内的图像或站点范围内的图像进行更改（我在开始新项目时总是这样做，如果我没有弄错，则reset.css和html5样板文件等也会这样做）。

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

修改

在评论中我理解需要一些解释，所以让我们看一下 this Fiddle

首先看一下第一段（带下划线的文本）。如果你看一下挂信＆＃39; （例如，＆＃39;＆＃39;＆＃39;以及＆＃39;＆＃39;），你会注意到角色的一部分实际上是＆＃39; ;挂起＆＃39;在线下。但是角色的底部是＆＃39;实际上被认为比角色的最低视觉部分高一点。字符由“正常”的下半部分对齐。性格，例如。字母＆＃39;＆＃39;＆＃39; h＆＃39;＆＃39; a＆＃39;等等。

现在你问自己，这与图像有什么关系？好吧，基本上图像处理与字符几乎相同，只要它们对齐inline即可。但它也意味着在与文本（或内联元素）的一行中，为“悬挂部分”保留了一点空间。如果我们在段落周围再次画一个方框（带有字符＆＃39; AgH＆＃39;的段落），你可以看到一个字符。

现在你可以得到一个线索，因为我之前说过内联图像处理相同。因为，浏览器会保留一些空间，以防万一你把一个带挂件的图像放入！现在说这是无稽之谈，因为图像永远不会突破它的盒子，但浏览器并不关心。这就是你需要明确对齐图像的原因！

我还添加了三个示例，一个是文本与顶部对齐，一个是中间，一个是底部。正如您在一个不对齐的段落中看到的那样，“悬挂部分”的空间是保留，但不是对齐版本，因为现在图像的最低部分确实被处理为元素的最低边缘。

我希望这可以清除魔法＆＃39;并让你理解它好一点：）

并且有一个旁注：尽管图像上的display: block可能有用，但它被认为是不好的做法，因为图像并不总是需要显示为块元素（意味着它跨越整个宽度并且＃39; s容器，前后换行）。因此，如果您想一劳永逸地修复它，只需在样式表顶部的某处使用此小片段：img { vertical-align: middle; }

Answer 2

由于img是一个内联元素，td“保持”一行代表底部的其他内联元素。所以你有两个解决方案：

td {
    line-height: 0;
}

或：

img {
    display: block;
}

Answer 3

向css添加显示块应该可以解决问题：

例如

img { display:block; }

如何设置为<img/>的相同大小

3 个答案: