How to measure the distance between elements
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.
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.
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-boxis 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.
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.
Measuring a size, not a gap
If you need the size of one element rather than the space between two, hover it: the width and height show in pixels. The page rulers and the live crosshair help with positions and alignment. The full walkthrough is in how to measure pixels on a website.
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 ChromeNo accountRuns locally14-day refund
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.
How do I measure the pixels of an element on a page?
Turn on Design Toolkit (Alt + R), press M and hover the element for its width and height in pixels. Select one element and hover another to read the gap between them.