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!
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
Images & HTML Elements
Measure between the following elements: images, input-fields, buttons,
videos, gifs, text, icons. You can measure everything you see in the
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.
- 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
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