Basics

Inspecting and measuring

The box model on hover, selecting, distances, pinned measurements and units.

Hover to inspect#

With Inspect on (1), hovering an element draws its box model in the same colours as browser DevTools: margin, border, padding and content, with the size of each band written in it. A label shows the element's tag, id, classes and size. Flex and grid containers also show their items, gaps and tracks.

Select an element#

Click an element, or press Enter while hovering it. The selection gets a blue outline and fills the side panel. Clicks are kept from the page while Nitpix is on; right-click still opens the browser's menu.

Keys	Moves the selection to
`Alt`+`Shift`+`↑`	The parent
`Alt`+`Shift`+`↓`	The first child
`Alt`+`Shift`+`←`	The previous sibling
`Alt`+`Shift`+`→`	The next sibling

When elements are stacked under the cursor, [ and ] step through them.

Measure distances#

With an element selected, hover any other element. Nitpix draws the gaps between the two in red, or the insets when one is inside the other, or the overlap when they cross. Labels never cover each other.

Pin a measurement

Press Space while hovering an element to pin it. Hold Shift to measure from the pinned element to whatever is under the cursor. Press Space again to unpin.

Copy a value

Press C to copy the value under the cursor: the label you are pointing at, or the distance shown, or the hovered element's size.

Units#

Press U to cycle units, or pick one from the Unit button. Values are never rounded before they are shown.

Unit	Relative to
px	CSS pixels
rem	The root font size
em	The element's font size
%	The parent's size
vw	The viewport width
vh	The viewport height
dpx	Device pixels

Pause#

Press P to step aside and use the page: hovering stops, and clicks and keys go back to the page. Your selection, guides and rulers stay. Press P again to resume.