Browser Extension to check distance between elements

Question

Is there any browser extension(any browser) using which I can check the distance between elements on the rendered page.

---

Update: Tried out Firefox Dev Tools Ruler: But, it doesnt show distance between neighboring elements as shown in above reference image. In order to get that I will have to manually determine exact values as per the ruler and then substract the values of the two neighboring elements.

Solution 1

How can I check the distance between elements on the rendered page.

I use JR Screen Ruler:

Free virtual ruler for your computer screen

This Screen Ruler is a great tool that allows you to accurately measure anything on your screen. This is especially useful when measuring graphics, web page browser sizes or whatever. Screen Ruler can display Pixels, Inches, Picas or Centimeters.

Source JR Screen Ruler

---

Firefox Dev Tools Ruler

Using the rulers

The rulers tool is useful to have around at all times. It provides a way to quickly check how tall or wide a page is, how big are the various columns or sidebars, and how much you’ve scrolled.

The rulers tool is not ON by default, so you have to enable it first. To do this:

• open the toolbox (I often use ctrl+shift+I as a quick way to toggle the tools, but that’s just me, F12 works too, and of course right-click on the page and select “inspect element” is often an easy way to do it),
• switch to the options panel (that’s the cog icon in the toolbar, far right, or ctrl+shift+O),
• there are many options in there, don’t be scared, just scroll down to the “Available Toolbox Buttons” section and make sure the “Toggle rulers for the page” box is checked,
• once done, you’ll have a nice little icon in the toolbox toolbar that you can just click to toggle the rulers.

Source Measuring elements and distances in Firefox DevTools

---

But I want a browser extension!

Chrome

Dimensions - Chrome Web Store:

This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect. It doesn't really work with images because there the colors change a lot pixel to pixel.

Images & HTML Elements

Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser.

Page Ruler - Chrome Web Store:

Page Ruler lets your draw out a ruler to any page and displays the width, height and position of it.

Features

• Draw a ruler to any page and view the width, height and top, bottom, left and right position
• Drag the edges of the ruler to resize it
• Use the arrow keys to move and resize the ruler
• Show guides extending from the ruler edges
• Manually update the size and position of the ruler from the toolbar to make precision changes
• Enable "Element Mode" to outline elements on the page as you move your mouse over them
• Navigate through parents, children and sibling elements of any measured element

Firefox

MeasureIt – Add-ons for Firefox:

Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

Note - not compatible with Firefox Quantum

Solution 2

I was struggling with this today and found that in the details settings in Chrome there is a ruler option under elements. With the ruler displaying, turning this on will show lines extended from the ruler to the element. Each little hash on the ruler is 5px. I was needing distance to the edge, so it was easy to see the difference, but you can easily see the end and beginning of elements to figure out the difference if needed.

Comments

[Seth]

Yes. Various web tools provide a ruler.

[harrymc]

Take a screenshot and use an image editor.

[cornflakes24]

I found Page Ruler Redux (chrome.google.com/webstore/detail/page-ruler-redux/…) to be quite good.

[Shailesh]

@cornflakes24 getting 404 on your extension url.

[Shailesh]

Thank-you @DavidPostill for the detailed reply. I have tried out the Firefox ruler option. Screenshot updated in question. However, it is not shows the distance between neighboring elements, like in my reference screenshot.

[DavidPostill]

@Shailesh So use one of the other solutions I proposed.

[Shad]

Settings > Preferences > Elements > Show Rulers. Also, stackoverflow.com/a/52564968/14068350 explains a great way to enable a permanent ruler in mobile view.