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.