Measure tool

Why Measure matters

Measure dims the current page, highlights the element under your cursor, and gives you inspection overlays for margin, padding, borders, and spacing. Use it to validate layout decisions without bouncing into DevTools or screenshot tools.

• Lock an element to reveal its box model (margin, border, padding) directly on canvas.
• Compare multiple elements to confirm even spacing in rows, columns, or complex layouts.
• Drop rulers and guidelines that stay aligned with your selection.

Start measuring

Activate the Measure tab from the toolbar. Rulers appear automatically and the rest of the page is dimmed so your focus stays on the elements you inspect.

Hover over any element to preview its bounding box and dimensions. Click once to lock the selection; click the same element again or press Esc to clear the selection.

Inspect the box model

When an element is selected, Measure renders margin, border, and padding layers around it. A set of corner labels appears as you move the cursor near each corner so you can read precise values without dragging rulers into place. The overlay updates live as you tweak CSS in your source or DevTools.

Compare elements side by side

Hold Shift and click to add more elements to the selection. Measure keeps track of every element you've selected and labels the gaps between them, making it easy to verify consistent spacing in nav bars, cards, table rows, or stacked buttons. The tool automatically sorts selections top-to-bottom or left-to-right so measurements stay readable.

Measure distances on the fly

With one element locked, hover over a second one to display horizontal and vertical distance arrows between them. This is the fastest way to check alignment offsets, hero spacing, or column gutters without adding temporary markup.

Lay down rulers and guidelines

Rulers show up automatically when Measure is active. Hover across the horizontal or vertical ruler to preview a guide; click to drop a persistent guideline that stays aligned to the element you selected. When the Grid tab is also enabled, rulers inherit your grid settings so it is easy to line guides up with columns.

Guides are scoped to the page you are inspecting. Drag them off-screen or click their handle to remove them. Guests can place up to ten guides per URL, while signed-in users and teams unlock higher limits and shared presets. If you hit the cap, the extension opens a modal explaining the remaining upgrade options.

Switching away from Measure dims the overlays but keeps guides visible if the "Show grid on other tabs" setting is on. Toggle ruler visibility from Settings whenever you need a clean slate.

Tips and shortcuts

• Press Esc any time to clear all selections.
• Shift-click the same element to remove it from a multi-selection.
• Combine Measure with the Grid tool (using "Show grid on other tabs") to overlay grids while you inspect spacing.