How-to · Design QA
How to check spacing and alignment on a live web page
The short answer
Open Screen Ruler on the page, hover elements to read the spacing between them in pixels, and drop guides along edges that should line up — anything misaligned misses the line. It runs only on the tab you invoke it on; Esc clears it.
- 1
Open the page at the viewport width your design targets and click the Screen Ruler icon.
- 2
Drop a guide along an edge that elements should share and spot what misses the line.
- 3
Hover elements to read the real gaps between them in pixels.
- 4
Drag-measure anything the spec gives an exact size for and compare.
- 5
Press Esc to clear the overlay when the pass is done.
The mock says 24 pixels between the heading and the card; the live page looks vaguely tighter. Judging that by eye is unreliable, and screenshotting the page into a design tool takes minutes per check. Screen Ruler answers it in place: hover for spacing, drop guides for alignment, drag to confirm a size against the spec — all on the page itself.
Hover to read the spacing
Turn on element measuring and hover: Screen Ruler reads the elements under the cursor and shows the gaps between them in pixels. That turns "looks cramped" into "this gap is 16px and the spec says 24px" — a bug report with a number in it gets fixed on the first pass, because the developer knows exactly what to change and when it's done.
Drop guides to check alignment
Guides are straight lines you pin anywhere on the page. Place a vertical guide on the leading edge of your content column and scroll: every element that should share that edge either touches the line or visibly doesn't. It's the fastest way to catch the one card that's 3px off in a grid, or a section heading that drifted after a refactor. Horizontal guides do the same for baselines and row alignment.
Confirm sizes against the spec
When the design gives an exact dimension — a 320px sidebar, a 48px touch target — drag-measure the real element and compare. Because the ruler measures the rendered page, what you read is what users actually get after fonts, padding and zoom have been applied, not what the stylesheet intended before the browser had its say.
A design-QA pass in practice
Open the page at the viewport width the mock targets. Pin a guide down the content edge and walk the page for alignment first, because one misaligned container explains many "wrong" gaps inside it. Then hover the key gaps — section padding, card gutters, heading-to-body spacing — and note each real value next to the spec value. Ten minutes of this produces a punch list a developer can close without opening the design file.
Only on the tab you invoke
Screen Ruler has no host permissions and doesn't watch your browsing. The overlay appears when you click the icon on a tab (activeTab), it changes nothing about the page itself, Esc removes it completely, and nothing you measure leaves your machine — the extension makes no network calls at all.