How to Check Your CSS Spacing Against an 8px Grid

Your design file says everything sits on an 8px grid. Then you open the stylesheet and find padding: 13px 18px, margin-bottom: 1.1rem, gap: 10px and a top: 7px someone added during a late-night bug fix. No single value is a disaster. Together, they’re why the card on the pricing page never quite lines up with the one on the homepage.

Finding those values by hand is tedious. You scroll through hundreds of lines, convert every rem in your head, and decide whether 18px should be 16 or 24. Most teams give up and live with the drift. A spacing audit is the kind of job a computer should do in a second.

What an 8px grid actually means

On an 8px grid (often called the 8pt grid), every margin, padding and gap is a multiple of 8: 8, 16, 24, 32 and so on. Many teams use a 4px grid instead, which adds 4, 12 and 20 for finer control in dense interfaces like tables and toolbars. Some design systems skip the grid and define a custom scale, such as 4, 8, 12, 16, 24, 32, 48. If your stylesheet uses rem, remember it’s relative to the root font size, so 1rem is 16px only when the root is 16px. MDN’s guide to CSS values and units explains how each unit resolves.

Whatever the base, the point is the same. A small, fixed set of steps means the space between elements is always one of a few known sizes. That’s what makes a layout feel consistent even when nobody can say why.

In CSS terms, spacing means the space around and between boxes: margin, padding, gap and positioning offsets. It doesn’t include width, height, borders, radius or font size. The CSS box model is a good refresher if you want the exact distinction.

Why spacing drifts off the grid

• Mixed units. 1.1rem looks innocent until you work out it’s 17.6px on a 16px root.
• Pixel-matching a mockup. Someone measured 13px in a screenshot and typed exactly that.
• One-off fixes. top: 7px nudges an icon into place and stays forever.
• Shorthand hides values. margin: 8px 12px 10px contains one off-grid value that’s easy to miss in a code review.
• Multiple contributors. Every developer has a slightly different idea of “a bit more space.”

What a good spacing check looks like

It reads real CSS

You shouldn’t have to reformat anything. A useful checker takes a full stylesheet, a component’s CSS or SCSS, or a block of inline styles, and finds every spacing property, including logical ones like margin-inline-start.

It handles rem and em

rem values need converting with your actual root font size before they can be checked. And a suggested fix should keep your unit: if you wrote 1.1rem, you want 1rem back, not 16px.

It tells you what to change

A list of “wrong” values isn’t enough. For each off-grid value you want the line number and the nearest value to use instead, plus corrected CSS that changes only those values.

Values exactly halfway round up, and negative offsets keep their sign. Assumes a 16px root font size.

Common mistakes to avoid

• Auditing widths and font sizes as spacing. A 343px-wide card or a 15px font isn’t a spacing problem. Keep the audit to margin, padding, gap and offsets.
• Snapping tiny optical nudges. padding: 2px 6px on a badge is often deliberate. Decide whether 1px and 2px values are allowed before you “fix” them.
• Trusting em conversions blindly. em values scale with each element’s own font size, so a checker using the root size can only approximate them. Review those results by hand.
• Snapping non-zero values to zero. Rounding 2px down to 0 on an 8px grid removes the space entirely. A non-zero value should snap to the smallest step, not disappear.
• Fixing everything in one giant commit. Spacing changes shift layouts. Fix a component at a time and check it visually.

How to do it with UI Spacing Checker

UI Spacing Checker parses and checks your CSS in your browser tab. Nothing is uploaded or saved.

1. Paste a stylesheet, a component’s CSS or SCSS, or a block of inline styles into Your CSS.
2. Choose your spacing system: a 4px grid, an 8px grid, or a Custom scale listing your allowed values.
3. Set the root font size if it isn’t 16px, and tick “Allow 1px and 2px values” if your system permits small optical nudges.
4. Read the results: an on-grid score, every distinct spacing value you use, and each off-grid value with its line, property and the value to use instead.
5. Copy the CSS with values snapped to your system. Only the off-grid values change; everything else stays exactly as you wrote it.

The checker covers margin, padding, gap (including row-gap and column-gap), inset, top, right, bottom, left, scroll-margin and scroll-padding, along with their side and logical variants.

If you haven’t settled on a scale yet, the Design Spacing Scale Calculator can generate one. To tidy the stylesheet itself first, see how to format and clean up messy CSS. To turn your scale into reusable tokens, see how to use Design Token Exporter.

Frequently asked questions

What is the 8pt grid in CSS?

It’s a spacing rule where every margin, padding and gap is a multiple of 8 pixels: 8, 16, 24, 32 and up. Teams that need finer control often use a 4px grid instead, which uses the same idea with a smaller step.

How do I find off-grid spacing values in my CSS?

Paste the CSS into a spacing checker set to your grid. UI Spacing Checker lists every off-grid value with its line number and the nearest on-grid replacement, then gives you corrected CSS to copy.

Should I use a 4px or an 8px grid?

An 8px grid is simpler and works well for most marketing pages and apps. A 4px grid gives you in-between steps like 12px and 20px, which help in dense interfaces such as data tables, forms and toolbars.

Final thought

You don’t need to fix every stray pixel today. Run the check, look at how many distinct spacing values you’re actually using, and bring the worst offenders onto the grid one component at a time. Fewer distinct values almost always means a calmer-looking interface.

Try the free UI Spacing Checker