How can I use Chrome to measure pixel distance between elements?

Question

Titles says it all. Is it possible to do without any extensions?

Answer 1

Use a Chrome Extension, this one works great for checking pixel distance between any web elements.

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

Hope this helps

Answer 2

I was struggling with this and found an answer in devtools. First, in responsive mode, to the far right in the header there is a More options menu that has a Show rulers option. Select that. Then in the details settings under Elements, there is a Show rulers option to check. With both of those, selecting an element will show lines extended from the rulers to the element so you can see their location. You can see begin and end for various elements to calculate spacing between. I needed to handle spacing to edge so it was a little easier. I don't know how to turn on the rulers when not in responsive mode, but they remained when I went back to a web layout.

Answer 3

Would this approach work? Get hold of an image containing alternating black and white dots(like a chess board) where each dot is 1 px. Make it the background image. You can zoom in like around 1000% and count the number of dots.

Answer 4

One thing you could do is using the Console tab to compute the horizontal or vertical distance between two elements using dimension/position properties/methods such as Element.getBoundingClientRect() or HTMLElement.offsetTop, but I guess you are looking for something that works more like a tool rather than coding your own solution.

Another maybe more usable option would be to use the Elements > Styles panel to add some kind of visual effect incrementally that allows you to measure what you need. For example, you could add a box-shadow / outline to an element and increment its size pixel by pixel until it touches the element next to it, so that you know how many pixels separate them.

Here's a simple code example / "demo" so that you see exactly what I mean:

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>

Other than that, your best option is to use an Extension.

I would recommend Dimensions, a Chrome Extension that will constantly and automatically measure vertical and horizontal space as you move the cursor until it finds an "obstacle", which is way faster and easier than drawing a box to take a measurement, as most of the other measurement/ruler extensions do.

Answer 5

You can use firefox developer tools as it supports measuring pixels and distance out of the box. It does not need any external plugin. Please check here