CSS Spacing Inspector: Read and Copy the Box Model

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 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.

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.