Design & Layout

Page Ruler

Measure any element and the gaps between elements in pixels, so you can check a build against the design spec.

When you'd use it

• Verify a 24px gap in the design is actually 24px in the build
• Measure inconsistent spacing between cards in a grid
• Check that a container respects its intended max width
• Settle a "that looks off" comment with an actual number

How to use Page Ruler

1. Activate Page Ruler.
2. Hover an element to see its width and height.
3. Drag across the page to measure any distance.
4. Use the readout to compare against your spec.

Page Ruler FAQ

Does it measure margins and padding separately?

Hovering shows element dimensions; for the full box model breakdown of a specific element, pair it with the CSS Inspector.

Does zoom affect the measurements?

Measurements are in CSS pixels, so keep the browser at 100% zoom for numbers that match your stylesheet.

Can I measure the gap between two specific elements?

Yes — drag from the edge of one to the edge of the other and read the distance. That is usually faster than reading two sets of margins and doing the arithmetic.

Works well with