如何使用 Chrome 测量元素之间的像素距离？

Question

标题说明了一切。是否可以在没有任何扩展的情况下进行？

Answer 1

使用 Chrome 扩展程序，这个扩展程序非常适合检查任何网络元素之间的像素距离。

https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=en-US

希望这可以帮助

Answer 2

我一直在努力解决这个问题，并在开发工具中找到了答案。首先，在响应模式下，标题最右侧有一个“更多选项”菜单，其中包含“显示标尺”选项。选择那个。然后在元素下的详细信息设置中，有一个显示标尺选项可供检查。对于这两种方法，选择一个元素将显示从标尺延伸到该元素的线条，以便您可以看到它们的位置。您可以查看各种元素的开始和结束来计算之间的间距。我需要处理边缘的间距，这样会更容易一些。我不知道如何在不处于响应模式时打开标尺，但当我返回网页布局时它们仍然存在。

Answer 3

这种方法行得通吗？获取包含交替黑白点的图像（如棋盘），其中每个点为 1 像素。将其设为背景图像。您可以放大 1000% 左右并计算点数。