Outer Box Ruler

Real-time spacing ruler & Tailwind/CSS generator for web elements and container distances.

Outer Box Ruler is an on-screen measurement tool that helps you calculate element margins, padding, and spacing to parent containers and neighboring elements simply by clicking or dragging. Instantly generate and copy Tailwind CSS classes (e.g., mt-[24px], mt-6) or standard CSS code directly from measured distances. Perfect for pixel-perfect design replication and everyday frontend layout tasks. ■ Key Features Visual guideline overlays showing distances to parent containers and adjacent elements One-click copy for Tailwind CSS (arbitrary values & standard scale) and standard CSS Flexible unit switching (px / rem / %) and grid snapping (4px / 8px) Keyboard nudging for precision adjustment: Arrow keys (1px) / Shift+Arrow (10px) Zero layout interference: Measurement UI rendered in Shadow DOM to protect web page styles Quick access via shortcut (Alt + R / Option + R on Mac) or context menu Built-in multi-language support (English / Japanese) ■ How to Use 1,Press Alt + R (Mac: Option + R) or right-click to launch Outer Box Ruler. 2.Click any element or drag across the screen to create a bounding box. 3.Check the guide lines and distances, then copy your desired Tailwind or CSS code with one click. 4.Press Esc to exit ruler mode anytime. ■ Privacy & Security ・Completely local execution: No external network requests or analytics. ・Zero data collection: Your browsing history, personal data, and page contents are never stored or transmitted.