# CSS Spacing Inspector: Read and Copy the Box Model

> A CSS spacing inspector that shows an element's box model, padding and margin on each side, gap, border radius and display, and copies each value on click.

- Canonical: https://www.superchargebrowser.com/features/css-spacing-inspector/
- Extension: inspect
- Published: 2026-10-08
- Updated: 2026-10-08
- Source: SuperchargeBrowser (https://www.superchargebrowser.com)

A layout looks off and the fix starts with one element. The padding inside a button is too tight, or the margin around a card is too wide, and you want the number without digging through DevTools. A CSS spacing inspector skips that dig. You point at the element and the Box section shows the box model with every side, value by value. [SuperchargeInspect](/inspect/) reads that one element for you.

## What the CSS Spacing Inspector Shows

The Box section draws the element box model as layers, from outermost to innermost: margin, then border, then padding, then content. Each side of the element carries its own value, so top, right, bottom and left are read out separately.

The center shows the content box as a width by height in CSS pixels, the space the element's text and children sit in. The panel shows the content size in whole numbers.

Beside the diagram, the section lists three more values on their own: Gap, Radius and Display. Radius is the `border-radius` value. Each one reads on its own and copies on its own when you click it.

## Reading the Element Box Model

Each row below names a part of the element box model and what to adjust when the space looks off.

| Value | What it tells you |
| --- | --- |
| `margin` | The space outside the border, on each side |
| `border` | The line around the padding, with its width on each side |
| `padding` | The space between the border and the content, on each side |
| Content | The content width by height, in CSS px |
| `gap` | The space between the element's children |
| Radius | The corner rounding, from `border-radius` |
| `display` | The layout mode, such as `block`, `flex` or `grid` |

Read them from the outside in, the same order the diagram draws them.

## Copying Spacing Values

Every value in the Box section is a button. Click the top padding and that one value copies. Click `gap` and just the gap copies. You copy a single value at a time, so you paste only what you are changing.

For the whole set, open the More ways to copy menu and choose Copy text only. It includes the full list of observed styles, with px values for the padding and margin in top, right, bottom, left order, then the `gap`, the `border-radius` and the `display`.

## What It Does Not Measure

It reads one element at a time, and only one. There is no ruler, no guide, no grid or flex overlay, and no measurement of the distance between two elements. To compare two elements, lock the first, note its padding and margin, then move to the other with the arrow keys and read its values.

## Keyboard Control and Privacy

Start with `Alt+Shift+E`, then move between elements with the arrow keys. Press `Ctrl+Up` and `Ctrl+Down` to step to the parent or the child, `Option+Up` and `Option+Down` on macOS. Stepping to the parent shows which wrapper adds the space. Press `Enter` to lock the element and `Esc` to go back to picking or close the panel.

The whole thing runs locally. It makes no network calls and there is no account, so nothing you inspect is sent anywhere.

[Read fonts and colors too with the CSS inspector](/features/css-inspector/).

---

Canonical URL: https://www.superchargebrowser.com/features/css-spacing-inspector/