Practical browser guide

How to Measure UI Spacing in a Browser

For exact webpage spacing, inspect the element in your browser’s developer tools. That tells you whether the space comes from padding, margin, gap, or the element itself. A screen ruler is useful for a visual check, but it cannot see through or sit on top of another browser tab.

Published and reviewed September 6, 2026

The short answer

Right-click the item, choose Inspect, and look at the Box Model in the Styles or Computed panel. Read padding for space inside the item, margin for space outside it, and gap on the parent flex or grid container.

First decide what you are measuring

“The space around this button” can mean several different things. If you read the wrong layer, you can get a perfectly accurate number that answers the wrong question.

Margin

Border

Padding

Button text

Part	What it means
Content	The text, image, or other content inside the element
Padding	Space between the content and its border
Border	The visible or invisible line around the padding
Margin	Space outside the border; it may separate two elements
Gap	Space set by a flex or grid container between its children

The quickest method: use Inspect

1
Open the inspector
Right-click the button, card, image, or text you want to check and choose Inspect. Developer tools opens with that element selected.
2
Confirm the highlighted box
Move the pointer over the selected HTML line. The browser highlights the element on the page. Make sure you selected the element itself, not a wrapper around the whole section.
3
Find the Box Model
Open the Styles or Computed panel and find the box diagram. It shows content size, padding, border, and margin separately.
4
Inspect the parent for gap
If two items are inside a flex or grid layout, select their parent. Look for the gap, row-gap, or column-gap property instead of assuming one child has a margin.
5
Check the real viewport
Measure at the screen width where the problem happens. Responsive styles can change at a breakpoint, so a desktop value may not apply on a phone.

Chrome documents this workflow in its official guide to the CSS and Box Model panels.

How to measure the gap between two items

If the parent uses flex or grid

Select the parent and look for gap. A value such as 24px is usually the cleanest answer.

If there is no gap property

Check the first item’s bottom or right margin and the second item’s opposite margin. Also check whether positioning or a transform moved either item visually.

Worked example

A card has 20px padding. Inside it, the heading has an 8px bottom margin and the button has no top margin. The heading-to-button gap is 8px—not 28px. The 20px padding belongs between the card border and its contents.

When the number on screen is still unclear

Developer tools can also read the final visible rectangle. After selecting an element in Chrome’s Elements panel, open Console and run the following. In Chrome DevTools, $0 means the element currently selected in Elements.

const box = $0.getBoundingClientRect();
({
  width: box.width,
  height: box.height,
  left: box.left,
  top: box.top
});

Width and height here describe the element’s visible bounding rectangle in CSS pixels. Transforms are included, so a scaled or rotated element can produce a different result from the width shown in the Box Model. Only run Console code you understand on a page you trust.

The CSSOM View specification defines getBoundingClientRect() as the bounding rectangle for an element’s boxes.

Where Online Ruler fits

Useful

Learning what 8, 16, or 24 CSS pixels look like
Creating a Selection with a known width or height
Estimating the physical size of a CSS measurement after calibration
Comparing gaps with two Guidelines inside the ruler workspace

Not what it does

It does not overlay an unrelated webpage
It does not read another tab’s HTML or CSS
It cannot tell whether space came from padding, margin, or gap
It does not replace DevTools for production UI debugging

A practical two-tool workflow

1. Inspect

Read the exact CSS px value and identify where it comes from.

2. Reproduce

Draw the same width or gap in Online Ruler if you need a visual reference.

3. Fix and recheck

Change the CSS, then inspect again at the same viewport width.

Common reasons two measurements disagree

Content box vs border box: the CSS width may describe only content while the visible element also has padding and border.
Transforms: scale() changes the visible rectangle without rewriting the original width property.
Responsive rules: the layout changed because the viewport crossed a breakpoint.
Browser zoom: a CSS-pixel measurement can remain the same while its physical size on the screen changes.
Screenshot scaling: an image viewer may be fitting a screenshot to the window instead of showing it at 100%.

Try it on the ruler

Open the tool, keep browser zoom at 100%, and use pixels first. Calibrate before relying on cm or inches.

Open the online ruler

Keep reading

How to use Guidelines and Selection

Choose the right ruler mode for a gap, edge, or rectangular area.

Read guide

CSS pixels vs device pixels

Understand the unit reported by browser layout tools.