Spacing JS
A JavaScript utility for measuring the spacing between elements on webpage. This is supposed to be used during development only. Try this out.
Read this document in other languages: English, 繁體中 文, 简体中文.
Usage
Import from CDN
Include Spacing.js with <script>
tag in your HTML page:
<!-- Use `UNPKG' CDN. --->
<script src="//unpkg.com/spacingjs" defer></script>
<!-- Or, use `jsDeliver` CDN. -->
<script src="//cdn.jsdelivr.net/npm/spacingjs" defer></script>
Import in source code
import Spacing from 'spacingjs';
Spacing.start();
Front end usage
-
Move your mouse cursor to an element, and press Alt on Windows or ⌥ Option on a Mac.
-
Move your mouse cursor to another element, the measurement results will be there.
More Options
Hold down with Shift key will delay the dismiss of measurement results, so that we can take a screenshot easier.
Chrome Extension & Tampermonkey version
You can install the Chrome Extension version on the Chrome web
store,
or build on your own with npm run ext
.
Contribute
Feel free to fork this repository and submit pull requests. Bugs report in GitHub Issues, features/ideas/questions discuss in GitHub Discussions.
License
Spacing.js is MIT Licensed.