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

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

4.5

The ultimate measuring tool for the web

PerfectPixel by WellDoneCode (pixel perfect)

4.3

This extension helps develop your websites with pixel perfect accuracy!

Better Ruler

4.8

一款网页测量工具,支持吸附测量。为前端开发和ui设计提供便利。

Designer Tools

4.6

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

Console Importer

4.6

Import JavaScript and CSS resources from console, with one command

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

4.5

The ultimate measuring tool for the web

PerfectPixel by WellDoneCode (pixel perfect)

4.3

This extension helps develop your websites with pixel perfect accuracy!

Better Ruler

4.8

一款网页测量工具,支持吸附测量。为前端开发和ui设计提供便利。

Designer Tools

4.6

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

Console Importer

4.6

Import JavaScript and CSS resources from console, with one command

Vue.js devtools (beta)

3.8

DevTools browser extension for Vue.js

Google apps