Features point at things
Measure any element on a live web page
M Measure in the toolbar, free with no account
The box model drawn on the page itself. Margin, border and padding shaded separately, rulers running out to the edges of the viewport, and the measured size in the readout as you move.
What you get
- Margin, border and padding, separately
- Each shaded in its own tone over the element, in place, rather than as four numbers in a panel you have to map back onto the page.
- Rulers to the viewport edge
- So you can see what an element is aligned to, not just how big it is.
- Sizes to a tenth of a pixel
- Sub-pixel layout is real and rounding it hides the reason two things do not line up.
- The inspection, in the same window
- Matched selectors sorted by specificity with their layer and at-rule context, and anything the browser computed differently from the cascade.
How Verbatim does it
The numbers come from getBoundingClientRect and the computed box values, so they are the browser's own, to a tenth of a pixel rather than rounded. The shading and the rulers are drawn in a shadow root of our own, outside the page's stacking context, which is why a page cannot restyle them and why nothing is added to the page's own DOM to be measured by accident.
How to use it
- Press Alt+Shift+P, then M.
- Hover anything. The box model is drawn where the element is.
- Click to lock it and read the full inspection.
What it will not do
- Transforms are reported as authored, so a rotated element measures its layout box rather than its painted bounds.
- It measures what is on screen at the current window size. Resize and measure again to see another breakpoint.
Compared with the DevTools box model
The DevTools box model is a small diagram in a panel beside the page. You read a number, look back at the element, and hold the two in your head at once.
Measure draws the same information on the element itself: margin, border and padding shaded separately, in place, with rulers running out to the edges of the viewport so you can see what a value is aligned to rather than just what it is. The numbers come from getBoundingClientRect and the computed box values, so they are the browser's own, to a tenth of a pixel rather than rounded to whole ones.
When to use this one
Use Measure to understand spacing. Use Pick element when you want to take the component away with you, since its Inspect mode carries the same box model alongside the matched selectors.
Questions about Measure
Does it show margin, border and padding separately?
Yes, each shaded in its own tone on the element itself, with the values labelled. Collapsed margins are shown as they actually resolve rather than as both values added together.
How precise are the numbers?
To a tenth of a pixel. They come from getBoundingClientRect and the computed box values, so they are what the browser is using, including fractional values produced by flex and grid.
Can I measure the distance between two elements?
The rulers run from the element out to the edges of the viewport, so alignment against anything in that path is visible directly. There is no two-element mode: hovering the second element is faster than building one.
Does it change the page while measuring?
No. The shading and the rulers are drawn in a shadow root outside the page’s own stacking context, so nothing is added to the page’s DOM and no layout is affected by looking at it.
Which keyboard shortcut opens it?
M, once the toolbar is open with Alt+Shift+P. Press M again to leave the mode.
Already have it? The first thirty seconds covers the shortcut, all thirteen keys and what to do if something does not work.