gpt4 book ai didi

html - chrome图片右边的空间是多少?

转载 作者:太空狗 更新时间:2023-10-29 15:54:23 27 4
gpt4 key购买 nike

考虑以下 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com