How-to guide
How to check element sizes and spacing in Chrome
Press Ctrl+Shift+C (⌘+Option+C on a Mac) for Chrome’s inspect tooltip. For more, press ⌘K with TabCmdr, type :rl and hover any element to see its size and spacing.
Quick answer
Measure an element in three steps
- ⌘K
Step 1
Open the palette
Ctrl+K on Windows and Linux, on the page to measure.
- :rl
Step 2
Type :rl
The ruler opens straight away.
- Esc
Step 3
Hover, then press Esc
Read the size and spacing, then close the ruler.
Chrome's way
Chrome’s inspect mode
Chrome’s developer tools can show an element’s size when you point at it:
- Press Ctrl+Shift+C on Windows, Linux and ChromeOS, or ⌘+Option+C on a Mac. DevTools opens the Elements panel in inspect mode.
- Hover an element on the page.
The tooltip lists the element’s dimensions in pixels, its selectors, its background and text colors, its font, and its padding and margin.
Source: Google’s DevTools inspect mode page, checked in October 2026.
TabCmdr's way
Measure with TabCmdr’s ruler
TabCmdr is a keyboard launcher that lives in your browser. Its ruler puts rulers along the edges of the page and measures whatever you point at, including the gap between two elements.
Before you start: add TabCmdr from the Chrome Web Store. It has a 7-day free trial and needs no account.
Step 1: Open the ruler
Press ⌘+K on a Mac or Ctrl+K on Windows and Linux and type :rl. The ruler opens as soon as you finish typing. You can also type ruler and press Enter on the Ruler tool.
:rl shortcut.Rulers appear along the top and left edges, and a bar at the bottom lists the keys you can press.
Step 2: Hover an element
Point at anything on the page. TabCmdr outlines it in blue and shows:
- its width and height, such as
112 × 48, and its tag and class, such asa.btn.primary, - its padding and margin on each side, in pixels,
- a panel with its position, size and styles: font size, weight, font, line height, colors, background and corner radius.
Lines from the cursor to the rulers mark your exact position on the page.
Step 3: Select one element and hover another
Click an element to select it. It turns red. Then hover a second element and TabCmdr shows the distance between the two in pixels.
Click the selected element again, or press Delete, to deselect it. Press Esc to close the ruler.
Keys you can use with the ruler
| Key | What it does |
|---|---|
| E | Turn the element selector on or off |
| M | Measure between any two points. Drag, or click twice. Hold Shift to keep the line horizontal or vertical, and press X to clear |
| B | Show or hide the padding and margin |
| S | Show or hide the styles panel |
| G | Show or hide guides |
| R | Show or hide the rulers |
| C | Copy the size of the selected element, such as 304 × 184 |
| Delete | Deselect the element |
| Esc | Close the ruler. In measure mode, the first press leaves measure mode |
To line things up, press on the top ruler and drag down to place a horizontal guide, or drag from the left ruler for a vertical one. Drag a guide back into the ruler, or double-click it, to remove it.
A selected element also gets a camera button. Click it to copy a picture of just that element. If a message reads To capture, open TabCmdr from its toolbar icon or browser shortcut, open the palette that way and try again.
The ruler feature page covers the rest.
Try it on your own tabs
Works in Chrome, Edge, Brave, Arc, Vivaldi and Opera.
Install for Chrome