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

Question

标题已经说明了一切。是否可以在不使用任何扩展程序的情况下完成？

- J. Doe

---

跨站资源 https://superuser.com/questions/1293458/browser-extension-to-check-distance-between-elements - TylerH

Answer 1

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

https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=zh-CN

希望这有所帮助。

- David Arango

---

请问您能否分享一个描述如何使用这个工具的链接？我似乎无法弄清楚。我想测量元素内的尺寸。 - MShakeG

很酷的扩展。专业提示：进入Chrome快捷键设置（chrome://extensions/shortcuts），将其热键设置为你想要的任何组合。我使用了Ctrl+Shift+S。 - Jerry Green

Answer 2

我遇到了这个问题，并在开发工具中找到了答案。首先，在响应式模式下，在标题栏到最右边有一个更多选项菜单，其中有"显示标尺"选项，请选择它。然后，在元素详细设置下，有一个"显示标尺"选项需要勾选。这样做之后，选择一个元素将会显示从标尺延伸到该元素的线条，以便您可以看到它们的位置。您可以查看各种元素的起始点和结束点来计算它们之间的间距。我需要处理到边缘的间距，因此这样做更加容易。 我不知道如何在非响应式模式下打开标尺，但当我返回网页布局时，它们仍然存在。

- lilabnersgal

Answer 3

这种方法可行吗？获取一个包含交替黑白像素点（就像棋盘一样）的图像，其中每个点都是1像素。将其设置为背景图像。您可以放大约1000％并计算点数。

- Abhay Aravinda

---

这就是问题应该得到的答案。 ;) - G-Cyrillus

Answer 4

你可以使用“控制台”选项卡来计算两个元素之间的水平或垂直距离，使用尺寸/位置属性/方法，例如Element.getBoundingClientRect()或HTMLElement.offsetTop，但我想你正在寻找更像工具而不是编写自己的解决方案。

另一个可能更实用的选择是使用“元素>样式”面板逐步添加某种可视效果，以便您可以测量所需的内容。例如，您可以向一个元素添加box-shadow/outline，并将其大小逐像素增加，直到它与旁边的元素接触，这样您就知道它们之间有多少像素的分隔距离。

这是一个简单的代码示例/"演示"，让您看到我所说的内容：

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

div {
  position: absolute;
  display: flex;
  border: 3px solid black;
  top: 10px;
  bottom: 10px;
  width: 100px;
  box-sizing: border-box;
}

.a {
  left: 10px;
}

.b {
  left: 120px;
  animation: measure 2s linear 0s infinite alternate; 
}

@keyframes measure {
    0%, 10% { box-shadow: 0 0 0 0px red; }
    10.001%, 20% { box-shadow: 0 0 0 2px red; }
    20.001%, 30% { box-shadow: 0 0 0 3px red; }
    30.001%, 40% { box-shadow: 0 0 0 4px red; }
    40.001%, 50% { box-shadow: 0 0 0 5px red; }
    50.001%, 60% { box-shadow: 0 0 0 6px red; }
    60.001%, 70% { box-shadow: 0 0 0 7px red; }
    70.001%, 80% { box-shadow: 0 0 0 8px red; }
    80.001%, 90% { box-shadow: 0 0 0 9px red; }
    90.001%, 100% { box-shadow: 0 0 0 10px cyan; }
}

<div class="a">A</div>
<div class="b">B</div>

除此之外，您最好的选择是使用扩展程序。

我推荐使用Dimensions，这是一个Chrome扩展程序，它会在您移动光标时不断自动测量垂直和水平空间，直到找到“障碍物”，这比绘制框来进行测量更快、更容易，大多数其他测量/标尺扩展程序都是这样做的。

- Danziger

Answer 5

你可以使用火狐开发者工具，它支持直接测量像素和距离。无需安装任何外部插件。 请查看这里。

- Mandar Deshpande

---

如果您有新的问题，请通过单击提问按钮来询问。如果需要提供上下文，请包含此问题的链接。- 来自审核 - Melvin