Measure tool

The measure feature in Designer Tools helps you inspect spacing, sizing, and alignment directly in the browser.

When Designer Tools is active, hover over any element to view its absolute position on the page. Click on an element to reveal its internal paddings, border radius, and other measurements.

Once an element is selected, you can hover over another element to compare them. The distances between the elements will be shown, making it easier to inspect alignment and spacing relationships.

To measure multiple elements at once, hold down the Shift key and click each element. This is useful for comparing lists, grids, or rows.

You can also use the rulers to add custom guidelines. When hovering over a ruler, a temporary guide appears to help check alignment quickly. Clicking on a ruler adds a persistent guide, and when an element is selected, these guides snap to its edges.