# CSS inspector & ruler

> An element inspector and page ruler for Chrome: hover any element for its size, padding and margins, and measure the space between elements on any website.

Canonical page: https://sitepeel.dev/css-inspector/

Inspect dimensions, padding and margins right on the page. Turn a layout that feels good into measurements you can explain.

Updated: 2026-10-28

This is a tool in the Sitepeel Chrome extension (free to install: https://chromewebstore.google.com/detail/sitepeel/khcjkaobanoeohahnlffnnppinoeljme). All extension tools: https://sitepeel.dev/features/index.md

## Highlights

- Element dimensions
- Padding & margins
- Distances on the page

## How to use it

1. **Choose Inspect & measure** Open the tool on the page you want to examine.
2. **Inspect an element** Look at its dimensions and the spacing inside and around it.
3. **Compare repeated patterns** Measure related cards and sections to find consistent spacing decisions.

## An element inspector for Chrome

Whitespace can come from padding inside an element, margins around it or the gap set by a parent layout. Two sections may look similar while using different rules.

Start with the container, then inspect its children. This makes it easier to understand why a card aligns with a heading or why a button has room to breathe.

- [Inspect a website’s layout, typography and colors step by step](https://sitepeel.dev/guides/how-to-inspect-website-design/index.md)

## A page ruler for Chrome

Page Ruler Redux, the extension many designers used to measure pages, is no longer in the Chrome Web Store. Inspect & measure does the same job on any page: an element’s size, padding and margins as you hover, and the distance between elements.

- [Page Ruler Redux alternatives compared](https://sitepeel.dev/compare/page-ruler-alternatives/index.md)

## Measure a system, not just one distance

Compare several examples before deciding that a value is a design token. A single 19-pixel gap may be the result of font metrics or layout rounding; repeated 16- and 24-pixel spaces are stronger clues.

Check the same layout at another screen width. Fluid containers and responsive rules can change the measurements you observe.

## Take the result into implementation

Use a small spacing scale in your own CSS and verify the result visually. Keep the difference between content size, padding, borders and outer space clear.

For the element’s markup and styles, switch to Pick element. For a wider reference that includes type and color, generate Design MD.

- [Compare Sitepeel, Chrome DevTools and Lighthouse by task](https://sitepeel.dev/guides/browser-tools-for-web-designers/index.md)
- [Test layout, content and interaction states across widths](https://sitepeel.dev/guides/responsive-website-testing-checklist/index.md)

## Questions and answers

### Can it replace browser developer tools?

It provides a focused visual workflow for inspection and measurement. Use browser developer tools when you need deeper debugging, JavaScript or network inspection.

### What is an element inspector?

A tool that shows how an element on a page is built: its size, padding, margins and styles. Sitepeel’s works as you hover, without opening DevTools.

### Is there a page ruler extension for Chrome?

Yes. Inspect & measure in the Sitepeel Chrome extension measures sizes and the space between elements on any page. Page Ruler Redux is no longer in the Chrome Web Store.

### Are measurements the same on every screen?

No. Viewport width, fonts and responsive CSS affect the layout. Measure at the widths relevant to your project.

## Related pages

- [Measure layout spacing](https://sitepeel.dev/guides/measure-website-spacing/index.md): Measure the padding, margins and gaps behind any website layout with the Inspect & measure tool in Sitepeel, then turn them into a spacing scale.
- [HTML & CSS extractor](https://sitepeel.dev/html-css-extractor/index.md): Pick any element on a website and copy its HTML and CSS. Preview, copy or save a button, card or section with the Sitepeel Chrome extension, in one click.
- [Extract a design reference](https://sitepeel.dev/guides/extract-website-design-system/index.md): Turn a website’s repeated colors, type, spacing and components into a design system reference in DESIGN.md, with an evidence template to copy.