3

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

enter image description here


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.

enter image description here

  • Yes. Various web tools provide a ruler. – Seth Feb 9 '18 at 12:52
  • Take a screenshot and use an image editor. – harrymc Feb 9 '18 at 13:13
2

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.

enter image description here

Source JR Screen Ruler


Firefox Dev Tools Ruler

enter image description here

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

  • 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. – Shailesh Feb 10 '18 at 4:02
  • @Shailesh So use one of the other solutions I proposed. – DavidPostill Feb 10 '18 at 7:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.