是否有任何浏览器扩展（任何浏览器）可以用来检查呈现页面上元素之间的距离。
更新：试用了 Firefox Dev Tools 标尺：但是，它没有显示相邻元素之间的距离，如上图所示。为了得到这个，我必须根据标尺手动确定精确值，然后减去两个相邻元素的值。
答案1
如何检查渲染页面上元素之间的距离。
我用JR 屏幕尺：
为您的计算机屏幕提供免费的虚拟标尺
此屏幕标尺是一款出色的工具，可让您准确测量屏幕上的任何内容。这在测量图形、网页浏览器大小或其他内容时尤其有用。屏幕标尺可以显示像素、英寸、派卡或厘米。
来源JR 屏幕尺
Firefox 开发工具标尺
使用标尺
标尺工具随时可用，非常有用。它提供了一种快速检查页面高度或宽度、各列或侧边栏大小以及滚动量的方法。
标尺工具默认未启用，因此您必须先启用它。具体操作如下：
- 打开工具箱（我经常使用 ctrl+shift+I 作为切换工具的快捷方式，但这只是我个人习惯，F12 也可以，当然，右键单击页面并选择“检查元素”通常也是一种简单的方法），
- 切换到选项面板（工具栏最右边的齿轮图标，或 ctrl+shift+O），
- 其中有很多选项，不要害怕，只需向下滚动到“可用工具箱按钮”部分，并确保选中“切换页面标尺”框，
- 完成后，您会在工具箱工具栏中看到一个漂亮的小图标，只需单击即可切换标尺。
但我想要一个浏览器扩展！
铬合金
此扩展程序可测量鼠标指针从上/下和左/右到到达边框的尺寸。因此，如果您想测量网站上元素之间的距离，这是完美的选择。它实际上不适用于图像，因为图像的颜色像素之间变化很大。
图像和 HTML 元素
测量以下元素之间的距离：图像、输入字段、按钮、视频、gif、文本、图标。您可以测量浏览器中看到的所有内容。
页面标尺可让您在任意页面上绘制标尺并显示其宽度、高度和位置。
特征
- 在任意页面上绘制标尺并查看宽度、高度以及顶部、底部、左侧和右侧的位置
- 拖动标尺的边缘来调整其大小
- 使用箭头键移动和调整标尺大小
- 显示从标尺边缘延伸的参考线
- 从工具栏手动更新标尺的大小和位置以进行精度更改
- 启用“元素模式”以在鼠标移到页面上时勾勒出元素的轮廓
- 浏览任何测量元素的父元素、子元素和同级元素
火狐
在任何网页上绘制标尺，以检查页面元素的宽度、高度或对齐方式（以像素为单位）。
注意 - 与 Firefox Quantum 不兼容
答案2
我今天一直在苦苦思索这个问题，发现在 Chrome 的详细信息设置中，元素下有一个标尺选项。在标尺显示时，打开此选项将显示从标尺延伸到元素的线条。标尺上的每个小哈希都是 5px。我需要到边缘的距离，因此很容易看出差异，但如果需要，您可以轻松查看元素的结尾和开头以找出差异。