考虑以下 example :
<!doctype html>
<html>
<head>
<style>
td {
padding: 0;
background: red;
}
img {
display: block;
}
</style>
</head>
<body
><table
><tr
><td
><img src="https://raw.githubusercontent.com/sinatra/sinatra/v1.4.7/lib/sinatra/images/500.png"
></td
></tr
></table
></body>
</html>
图像右侧的 chrome 中有一条红线。 firefox 中没有这样的行。它看起来不像一个空格，因为 html 标记在标签之间没有空格。它看起来不像是边距，因为 Developer tools 没有报告任何边距。
这是什么？它需要多少空间？
我正在运行 chromium-47.0.2526.111(64 位)，如果有的话。
UPD 我做了一个没有空格的例子，专门说明红线不是空格引起的。
接着，发现当Zoom为例如110%时，会出现这条线。所以，现在一切都应该清楚了。
最佳答案
是因为方式<td>显示元素。如您所见，它们显示为:
display: table-cell;
这是因为表格单元格是如何计算像素的。由于 1 像素不等于 CSS 中的 1 像素，如果启用 DPI 缩放(或缩放)，它会开始表现得很奇怪。
您可以找到您的 <td> 的另一种方法里面<tr>或者简单地将显示更改为 display: inline;
这都是因为像素大小的计算方式。我知道这听起来很奇怪，但 1px 不是 1 个物理像素。 本质上，您的 td 背景会根据您的图像大小发生变化。当您的图像达到奇数时(由于缩放或 DPI 缩放)，它会向下或向上舍入。这是计算发生错误的时候。
来源:https://www.w3.org/TR/css3-values/#absolute-lengths
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
关于html - chrome图片右边的空间是多少？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35604525/