How to measure the distance between two elements
Last updated: September 7, 2026
Design review comes down to one question surprisingly often: is that gap 24px or 32px? Eyeballing it does not settle an argument, and screenshots into a design tool lose the browser zoom level. Here is how to get a number you can defend.
Method 1: read the box model in DevTools
DevTools gives you exact numbers for a single element.
- Right click the element and choose Inspect.
- Scroll to the box model diagram at the bottom of the Styles pane.
- Read the margin, border, padding and content values off the diagram.
This is precise and it is the right tool when the gap is made of one element's margin or padding. It falls apart when the space between two things is the sum of several boxes, a flex gap, and a collapsed margin. The box model tells you about one element at a time, and the gap you care about usually is not owned by any single one of them.
Chrome will also show a distance readout if you hover a second element while the first is selected, but it only appears in some situations and only between the two boxes, not between arbitrary points.
Method 2: measure from the console
DevTools keeps a reference to recently inspected elements: $0 is the last one you selected, $1 the one before. Inspect the upper or left element first, then the other one, then:
const a = $1.getBoundingClientRect(), b = $0.getBoundingClientRect();
({ gapX: b.left - a.right, gapY: b.top - a.bottom })Negative numbers mean the boxes overlap on that axis, which is often the answer you were actually looking for. This measures rendered geometry, so collapsed margins and flex gaps are already accounted for.
Method 3: measure a screenshot
Take a screenshot, drop it into a design tool, and measure there. This works for any two points and it is what most people fall back to.
The problem is fidelity. A screenshot on a high density display is captured at device pixels, so a 32px gap can measure 64. If you resize the image to fit the canvas you introduce a scale factor you then have to remember. The number you get is only as good as your bookkeeping.
Method 4: measure on the page itself
The reliable answer is to measure in the same coordinate space the browser is laying out in, which means measuring on the live page.
With Screen Ruler, select one element and hover a second, and the distance between them is drawn on the page in CSS pixels. No screenshot, no scale factor, no reconstructing a gap from three box models. Rulers along the top and left edges give you the page coordinates as you move.
Because it measures what the browser rendered, it is correct at any zoom level and on any display density. Distances are reported as whole pixels.
What else is worth knowing
- Collapsed margins are real. Two stacked elements with 20px and 30px vertical margins produce a 30px gap, not 50. Measuring on the page shows you the truth; adding up CSS values does not.
- Flex and grid gaps are not margins. They will not appear in the box model diagram at all, which is the single most common reason the numbers do not add up.
- Subpixel values exist. A gap reported as 23.99 is a rounding artifact of a percentage or a transform, not a bug in your measurement.
Common questions
Why does DevTools show a different number than my design file?
Usually browser zoom, a root font size that is not 16px, or a transform on an ancestor. Measure on the page at 100% zoom before assuming the implementation is wrong.
Can I measure between elements inside different containers?
Not with the box model, since it is scoped to one element. On-page measuring and guides both handle it, because they work in viewport coordinates rather than the DOM tree.
Does this work on a fixed header that moves when I scroll?
Yes. Measurements are taken against the rendered position, so a sticky or fixed element measures from wherever it currently sits.