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

Question

标题说明了一切。是否可以不进行任何扩展？

Answer 1

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

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

希望对你有帮助

Answer 2

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

Answer 3

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

Answer 4

您可以做的一件事是使用Console 选项卡来计算两个元素之间的水平或垂直距离，使用维度/位置属性/方法，例如Element.getBoundingClientRect() 或HTMLElement.offsetTop，但我猜您正在寻找一些东西这更像是一种工具，而不是编写自己的解决方案。

另一个可能更有用的选项是使用Elements > Styles 面板逐步添加某种视觉效果，让您可以测量您需要的内容。例如，您可以将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 扩展程序，它会在您移动光标直到找到“障碍物”时不断自动测量垂直和水平空间，这比绘制一个框来进行测量要快得多、更容易，就像大多数其他测量/标尺扩展一样。

Answer 5

您可以使用 Firefox 开发人员工具，因为它支持测量像素和开箱即用的距离。它不需要任何外部插件。 请查看here