How to measure the distance between elements

Q: Why do two tools report different numbers for the same gap?

They measure different edges. One measures border box to border box, another measures the visible text, another includes the margin. A 24px gap between two boxes is not 24px between the words inside them.

Q: Do the numbers change with browser zoom?

Not for a tool that reads CSS pixels, which is what layout is built in. A tool measuring screen pixels from a screenshot will drift with zoom and with the device pixel ratio.

The measurement DevTools does not offer. Three ways to get the gap between two things on a live page — and how to find out where that space actually comes from.

Updated September 2026 · by the Design Toolkit team

The short answer

DevTools has no "distance between these two elements" tool. The fastest route is a measurement extension: click the first element, hover the second, and the gap is drawn with its number. Without one, inspect both elements, read their box model numbers and subtract — or run getBoundingClientRect() on each in the console.

1. Click one, hover the other

This is the Figma interaction, brought to a live page. Select the first element, move to the second, and lines are drawn between their nearest edges with the distance labelled — horizontally, vertically, or both when they are diagonal from each other.

It is worth pinning the result. Checking whether a row of cards is evenly spaced means measuring the same relationship four times, and a measurement that disappears when you move the cursor makes that harder than it needs to be. In Design Toolkit the arrow keys also walk the selection up to the parent or down to a child, so you can measure the box you meant rather than the one your cursor happened to land on.

Measurement lines drawn between two elements on a web page with the distance labelled in pixels — Click one element, hover the second: the gap is drawn between them with its number, horizontally and vertically.

2. Two bounding boxes in DevTools

Nothing installed, a bit of arithmetic:

Inspect the first element

Right-click, Inspect. Hover it in the Elements panel and Chrome draws the box model — content, padding, border, margin — with sizes in a tooltip.

Inspect the second

Do the same and note where its edge sits.

Subtract

The gap is the second element's top minus the first element's bottom. DevTools will not do this for you, which is the whole reason measurement extensions exist.

3. Compute it in the console

Exact, and useful when you want to check the same gap on twenty cards at once:

const a = document.querySelector('.card:nth-child(1)');
const b = document.querySelector('.card:nth-child(2)');
const gap = b.getBoundingClientRect().left - a.getBoundingClientRect().right;
console.log(gap);

Every value is in CSS pixels, so the number holds at any zoom level.

Where the space actually comes from

Here is the part that decides whether your rebuild behaves. A 24px gap on screen can be any of these, and they look identical:

Padding on one of the elements. Belongs to the element, sits inside its background, and is included in its size when box-sizing: border-box is set.
Margin on one of them. Belongs to the space around it, sits outside the background, and — this is the trap — collapses with the neighbouring margin.
A flex or grid gap on the parent. Belongs to neither child, applies between every pair, and never collapses.

A box model overlay tells them apart at a glance: content, padding, border and margin drawn as separate bands, each labelled. Rebuild a margin as padding and the background will be the wrong size; rebuild a flex gap as a margin and the last item will have a trailing space nobody asked for.

Two pinned measurement cards kept on screen while a third element is inspected — Pinning a measurement keeps it on screen, which is what you want when checking whether four gaps are really the same.

Margin collapsing, briefly

Worth knowing because it explains a measurement that looks wrong. Two block elements stacked vertically, the first with margin-bottom: 24px and the second with margin-top: 16px, do not produce a 40px gap. They produce 24px — the larger of the two wins and the other disappears.

This does not happen inside a flex or grid container, which is one of the quiet reasons gap replaced margins for spacing rows of things.

Measure between anything, in one click

Click one element, hover another, read the gap — plus the box model that says where the space comes from. Free for 7 days.

Add to Chrome — free trial

Common questions

Why do two tools report different numbers for the same gap?

They measure different edges — border box to border box, visible text to visible text, or including the margin. A 24px gap between two boxes is not 24px between the words inside them.

Is the gap padding, margin, or a flex gap?

On screen they are identical. A box model overlay tells them apart, and it matters: padding belongs to the element, margin belongs to the space around it and can collapse, and a flex or grid gap belongs to the parent and never collapses.

Why did my margin disappear?

Vertical margins between block siblings collapse: 24px below one and 16px above the next give a 24px gap, not 40px. Flex and grid gaps never collapse.

Do the numbers change with browser zoom?

Not for a tool reading CSS pixels, which is what layout is built in. A tool measuring screen pixels will drift with zoom and with the device pixel ratio.