Measure the distance between elements

Select one element, hover another, and Screen Ruler draws the gap between them in pixels on every side where they are apart.

What it measures

Distance measurement answers the question every layout review comes back to: how far apart are these two things? With one element selected, hover any other element and Screen Ruler draws a line from edge to edge with the gap written on it, in whole pixels.

• Separate elements. If the hovered element sits above, below, left or right of the selection, you get a line for each side where there is space between them. An element diagonally away gets both a horizontal and a vertical measurement.
• Nested or overlapping elements. Hover a child inside the selected element and the lines measure the inset from each edge of the child to the matching edge of the parent, which is handy for checking padding and alignment inside a card.
• Any two elements on the page. They do not have to be siblings or even near each other in the HTML. A logo in the header and a button further down are measured the same way as two adjacent buttons.

How to measure the distance between two elements

1. Start Screen Ruler by clicking its toolbar icon, pressing Alt + Shift + S (Option on a Mac), or right-clicking the page and choosing Screen Ruler.
2. Click the first element to select it. Guide lines extend from its four edges across the page.
3. Hover the second element. Measurement lines appear between the two with the pixel distance on each.
4. Move to other elements to compare more gaps. The selection stays put until you click something else or press Esc.

If your click lands on a child of the element you meant, press Alt + Shift + ↑ to step up to its parent before you measure. There is a step-by-step guide in how to measure the distance between elements.

How the numbers are worked out

Each measurement uses the bounding boxes the browser reports for the two elements, the same boxes it uses to lay out the page. That means:

• Distances are in CSS pixels, the unit your stylesheet and design tool use, regardless of screen density.
• Margins and transforms are already applied. You measure where things actually ended up on screen, not what the CSS intended.
• Lines stay attached as the page moves. Measurements are redrawn when you scroll or resize the window, so you can check the same gap at a narrower width.

The edge guides drawn from the selected element help with alignment as well as spacing: if another element's edge sits exactly on a guide, the two are aligned.

Limits

Values are rounded to whole pixels on the page. Measurements run between element boxes, so to measure to the edge of a piece of text rather than its container, select the text element itself. For positions measured from the edge of the window rather than between elements, use the page rulers.

When it is useful

• Design QA. Check that the space between sections, cards and buttons matches the spacing in the mockup.
• Spacing systems. Confirm that gaps land on your 4 or 8 pixel scale instead of odd values like 13 or 27.
• Bug reports. Give developers a precise number instead of "this looks a bit too far apart".
• Learning from other sites. Measure the rhythm of a layout you admire on any public page.

Distance measurement builds on element inspection and is free in Screen Ruler, with no account needed.

Common questions

How do I measure the space between two elements in Chrome?

With Screen Ruler active, click the first element, then hover the second. The pixel distance appears on a line between them. DevTools has no built-in way to do this, so without an extension you are left subtracting coordinates by hand.

Does it measure from the margin or the border?

From the visible box edges the browser reports for each element, which include padding and border but not margin. The number is the empty space you can see between the two boxes.

Can I measure elements that are far apart on the page?

Yes. The two elements can be anywhere in the page structure. If the second one is further down, scroll to it while the first stays selected and hover it.

Is distance measurement free?

Yes. Measuring distances is part of Screen Ruler's free plan and stays free.