:rl
Ruler
See any element’s size and the gap between two of them, in pixels. Press ⌘K, type :rl and point at the page to measure it.
7-day free trial No account Chrome, Edge, Brave, Arc, Vivaldi and Opera
Live demo
Step 1
On any page. Ctrl+K on Windows and Linux.
Step 2
Rulers appear along the top and left edges.
Step 3
Click an element to select it, then press C.
In detail
The ruler lays a see-through layer over the page. Everything you point at is measured, and nothing on the page changes.
Point at an element to outline it with its tag, like button.btn, and its width × height. Click it to select it. Then point at a second element and the ruler draws the gap between them in pixels.
Drag down from the top ruler for a horizontal guide, or right from the left ruler for a vertical one. Guides stay pinned to the page as you scroll. Two guides on the same axis show the distance between them, and a selected element shows its distance to each guide.
G to hide or show all guides.Margin and padding are shaded around the element you point at, and a panel lists its styles, such as font size, line height and colors as hex codes. Press M to switch to free measuring and drag a line between any two points.
B hides or shows margin and padding, and S hides or shows the style panel.X clears your lines.Press C with an element selected to copy its size, like 148 × 40. You see Copied: 148 × 40.
Click the camera button next to a selection to copy just that element as a PNG, even when it’s taller than the screen.
Both rulers mark where your cursor is, in page pixels, so you can line things up by eye.
While it’s open, key presses go to the ruler, not the page. Reload with ⌘R or Ctrl+R still works.
Check sizes and spacing on any page without opening the inspector or knowing its code.
Esc first cancels a line you’re drawing, then leaves free measuring, then closes the ruler.
FAQ
More in the documentation.
Press ⌘K on a Mac or Ctrl+K on Windows and Linux, type :rl and point at the element. Its width and height in pixels show next to it.
Click the first element to select it, then point at the second. The ruler draws the gap between them in pixels.
Yes. Drag one out of the top or left ruler. Guides stay with the page as you scroll, and you remove one by dragging it back or double-clicking it.
Select the element and press C. A size like 148 × 40 goes to your clipboard.
Yes, shaded around the element. Press B to hide or show them.
Press Esc. If you’re in the middle of a free measurement, the first Esc cancels that line.
Free for 7 days Then $3.99 / y No account