Одна вещь, которую вы можете сделать, это использовать вкладку 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>
Кроме этого, лучше всего использовать расширение.
Я бы порекомендовал Размеры , расширение Chrome, которое будет постоянно и автоматически измерять вертикальное и горизонтальное пространство при перемещении курсора, пока не найдет «препятствие», которое намного быстрее и проще, чем рисование прямоугольника. выполнить измерение, как и большинство других расширений измерения / линейки.