Item logo image for SpacingJS

SpacingJS

spacingjs.com
4.3(

11 ratings

)
Item media 3 (screenshot) for SpacingJS
Item media 1 (screenshot) for SpacingJS
Item media 2 (screenshot) for SpacingJS
Item media 3 (screenshot) for SpacingJS
Item media 1 (screenshot) for SpacingJS
Item media 1 (screenshot) for SpacingJS
Item media 2 (screenshot) for SpacingJS
Item media 3 (screenshot) for SpacingJS

Overview

Precision spacing measurement tool for web developers and designers. Hold Alt/Option key and hover over elements to measure.

Precision spacing measurement tool for web developers and designers. Measure distances, margins, and padding between webpage elements with pixel-perfect accuracy. 🎯 How to Use: 1. Click the extension icon to activate SpacingJS 2. Hold Alt (Windows) / Option (Mac) and hover over any element 3. Move cursor to another element to see precise measurements 4. Click the icon again to deactivate ⌨️ Quick Access: - Ctrl+Shift+S (Windows) / Cmd+Shift+S (Mac) to activate - Alt+S to toggle on/off ✨ What's New in v1.1.0: - Smart Toggle: Visual feedback shows when active (green dot on icon) - Keyboard Shortcuts: Quick activation with hotkeys - Enhanced Measurements: Shows element tag, class, and font size - Better Compatibility: Works with all element types including SVG 💡 Pro Tips: - Hold Shift to keep measurements visible longer (perfect for screenshots) - Works on any website (except browser internal pages) Perfect for designers, developers, and QA teams who need precise measurements for pixel-perfect layouts.

Details

  • Version
    1.1.0
  • Updated
    June 18, 2025
  • Size
    14.8KiB
  • Languages
    English
  • Developer
    Website
    Email
    contact@stevenlei.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

稀土掘金

3.5

为程序员、设计师、产品经理每日发现优质内容。

CSS Peeper

4.2

Inspect website styles in seconds. Supercharge your workflow, and save hours of work.

Measuremate — Pixel Ruler for Web Design

4.4

Measure distances between any elements on any website. Pixel ruler + CSS inspector for pixel-perfect design handoff.

Measure Everything

4.7

Element distance measurement tool.

Better Ruler

4.8

A page ruler which can snaps around web elements for easier measurement. Provide convenience for front-end development and ui design

Designer Tools

4.6

A collection of tools to help you design and develop websites with precision.

PerfectPixel by WellDoneCode (pixel perfect)

4.3

Drop your mockup on the live page for pixel-perfect comparison with your code.

Vue.js devtools (beta)

3.8

DevTools browser extension for Vue.js

Dimensions

4.2

A tool for designers to measure screen dimensions

Octotree - GitHub code tree

4.9

GitHub on steroids

Show All Padding & Margins

4.5

Highlights margins and padding for all HTML elements in any webpage.

element-spacing

3.3

page css ruler;page measure tools;Get page's/element's size/margin/padding/spacing info

稀土掘金

3.5

为程序员、设计师、产品经理每日发现优质内容。

CSS Peeper

4.2

Inspect website styles in seconds. Supercharge your workflow, and save hours of work.

Measuremate — Pixel Ruler for Web Design

4.4

Measure distances between any elements on any website. Pixel ruler + CSS inspector for pixel-perfect design handoff.

Measure Everything

4.7

Element distance measurement tool.

Better Ruler

4.8

A page ruler which can snaps around web elements for easier measurement. Provide convenience for front-end development and ui design

Designer Tools

4.6

A collection of tools to help you design and develop websites with precision.

PerfectPixel by WellDoneCode (pixel perfect)

4.3

Drop your mockup on the live page for pixel-perfect comparison with your code.

Vue.js devtools (beta)

3.8

DevTools browser extension for Vue.js

Google apps