Online Tool Store
UI Spacing Checker
Paste CSS to flag every margin, padding, gap and inset value off your 4px grid, 8px grid or custom scale, with the nearest fix and corrected CSS.
This works right here on your device — nothing gets sent out.
Example shown — paste your own CSS, SCSS or inline styles to replace it.
Result
—
| Line | Property | Value | Use instead |
|---|
How UI Spacing Checker works
- Paste a stylesheet, a component's CSS or SCSS, or a block of inline styles.
- Choose your spacing system: a 4px grid, an 8px grid, or a custom list of allowed values. Set your root font size if it isn't 16px.
- Every spacing value is checked: you get an on-grid score, a list of every distinct value you use, and each off-grid value with its line and the nearest value to use instead.
- Copy the corrected CSS, which changes only the off-grid values and leaves everything else exactly as you wrote it.
The rule
A value is on the grid when, converted to pixels, it is a whole multiple of the base unit. rem and em are converted with your root font size. Off-grid values are snapped to the nearest multiple:
on grid ⇔ px ÷ base is a whole number · fix = round(px ÷ base) × base
Example: on a 4px grid, margin-bottom: 1.1rem with a 16px root is 17.6px. 17.6 ÷ 4 = 4.4, which rounds to 4, so the fix is 16px — written back as 1rem.
FAQ
What is the 8pt grid?
It is a spacing rule where every margin, padding and gap is a multiple of 8 pixels (8, 16, 24, 32…). Many teams use a 4px grid instead for finer control in dense interfaces. Either way, a small fixed set of steps keeps layouts consistent.
Which CSS properties does the checker look at?
Margin, padding, gap (including row-gap and column-gap), inset, top, right, bottom, left, and scroll-margin and scroll-padding, including their side and logical variants such as margin-inline-start. Width, height, borders, radius and font sizes are not spacing and are ignored.
How are rem and em values checked?
They are converted to pixels with the root font size you enter (16px by default), so 1.5rem is checked as 24px. The suggested fix keeps the original unit — 1.1rem becomes 1rem on a 4px grid. em values are converted the same way, but in the browser they scale with each element’s own font size, so treat those results as approximate.
How is the suggested value chosen?
It is the closest value in your system. Values exactly halfway round up, so 10px on a 4px grid becomes 12px, and negative offsets keep their sign (-6px becomes -8px). A non-zero value never snaps to 0 — 2px on an 8px grid becomes 8px, not 0px. With a custom scale, the closest listed value is used.
Should 1px and 2px values be allowed?
Many design systems allow tiny nudges for optical alignment, such as padding: 2px 6px on a badge. Tick "Allow 1px and 2px values" to accept them; everything else is still checked against your grid.
Is my CSS sent anywhere?
No. The CSS is parsed and checked in this browser tab; nothing is uploaded or saved.
How we compare
| Feature | Online Tool Store | Grid Maker Pro 8pt overlay | See-Tool CSS Spacing Calculator |
|---|---|---|---|
| Finds off-grid values in your CSS automatically | Yes | Visual overlay — you check by eye | Generates a scale; no CSS check listed |
| Nearest on-grid value and corrected CSS | Yes | Not offered | Not listed |
| Custom spacing scale | Yes — any list of values | Custom base interval | Linear, Fibonacci and powers scales |
If you already have CSS and want to know which spacing values break your system — and what to change them to — UI Spacing Checker audits it line by line, right in this tab.