How to measure distance between screenshot elements

For spacing work, use a sharp capture of the interface at the state and scale you are reviewing. A resized copy, a photographed screen, or a compressed image may no longer represent the original geometry. Keep the source capture when you need to explain a discrepancy to somebody else.

Decide which boundaries matter: the visible glyph edge, a button outline, the edge of a card, or a shadow. They are not interchangeable. The automatic ruler works from image contrast, so it can find a strong shadow instead of the layout boundary you intended. Its number is only useful when those endpoints answer your actual question.

1. Open the original capture, finish any pending crop, and select Ruler. Zoom enough to identify the boundaries you want without resampling the source image.
2. Choose the horizontal ↔ or vertical ↕ control and move the pointer into the relevant gap. Wait for the line and distance readout to settle.
3. Inspect both end caps. Move along a clean part of the same boundary if a letter, icon, shadow, or texture attracts the detector. Adjust Edge sensitivity when the boundary is weak or noisy.
4. The normal mode detects an inner gap; holding Shift requests the outer-edge mode. Keep the result whose endpoints match the dimension you intended, rather than choosing a mode solely because its number looks familiar.
5. Read the status-bar unit setting. Use native px for image coordinates; Logical is available only when capture-scale information is known. Click to imprint a useful ruler annotation, or leave it as a temporary inspection.

For a temporary automatic measurement, focus the canvas with no pending selection and hold 1 for horizontal Ruler or 2 for vertical Ruler; release the key to return to the previous tool. A selected Spotlight uses number keys for its own settings, so deselect it first. Alt + D and Alt + S are separate horizontal and vertical alignment guides spanning the image: they do not detect edges or report a gap distance. These are editor shortcuts, not global Windows commands.

Suppose two controls should have a 24-unit gap in the source interface. The captured image shows a clean space between the right edge of the first control and the left edge of the second. Put the horizontal ruler inside that space and make sure its caps touch the actual control boundaries, excluding their shadows.

A hypothetical capture at 150% display scaling can represent 24 logical display units as 36 native image pixels. If that capture's scale is known, the corresponding Logical readout can be 24 dip while the native readout is 36 px. That example explains the distinction; it is not proof that a particular web layout uses 24 CSS pixels.

If the screenshot was imported without source-scale metadata, retain the pixel measurement and state that limitation. Do not guess a scaling factor from the image's dimensions.

Measure the same gap at a nearby clean row to see whether the detector follows the same pair of edges. A sudden change often means one cap snapped to text or a shadow. Zooming the editor should help inspection without changing the underlying source distance; resizing the actual image is different and changes the geometry being measured.

If you imprint the guide, inspect the exported file to ensure the number and end caps remain readable. State the unit beside the reported value in your ticket. Include enough of the surrounding interface to show which two elements you measured, while removing unrelated private content.

A screenshot can document a rendered discrepancy, but it does not expose invisible layout boxes or padding rules. When source CSS or design dimensions are available, compare those separately rather than treating image edges as the definitive implementation specification.

The ruler can report no clear edges on flat, noisy, or low-contrast regions. Try the other axis only if it answers the same question, move away from anti-aliased text, or obtain a sharper original. Avoid repeatedly increasing sensitivity until an arbitrary texture gives a plausible-looking result.

Transparent or composited material and decorative shadows make edge choice ambiguous. For a distance that cannot be inferred reliably from the pixels, use the application's own dimensions or developer tools and describe that method. Automatic detection saves pointing effort; it does not remove the need to choose the right measurement.