Element Inspector
Inspect any element's box model, spacing, alignment, and computed styles with configurable visualization overlays.
The Element Inspector is the core feature of the browser extension. Hover over any element to see detailed visual overlays showing dimensions, spacing, alignment, and typography.
Inspector settings
All visualization features can be toggled independently:
| Setting | Description | Default |
|---|---|---|
| Alignment Guides | Full-page crosshair lines from element edges (red dashed) | On |
| Box Model | Margin/border/padding/content colored overlays | On |
| Internal Spacing | Gap visualization between child elements (purple) | On |
| Internal Alignment Guides | Edge lines across child elements (blue) | Off |
| Measurements | Width/height dimension labels | On |
| Info Label | Element tag, classes, typography, colors panel | On |
Visualization layers
Box model
Shows the CSS box model with color-coded regions:
- Content — Blue highlight
- Padding — Green overlay
- Border — Yellow overlay
- Margin — Orange overlay
Each region shows its exact pixel values.
Alignment guides
Red dashed crosshair lines extend from all four edges of the hovered element to the viewport edges. Distance labels show the pixel distance from the element to the page edges.
Internal spacing
Purple indicators between direct child elements showing the gap in pixels. Useful for verifying consistent spacing in flex/grid layouts.
Internal alignment guides
Blue lines showing edge alignment across significant child elements. Helps verify that internal elements are properly aligned.
Advanced options
| Option | Description |
|---|---|
| Deep mode | Traverse nested descendants up to 4 levels deep |
| Include text lines | Show line-height based edges for text elements |
| Extend to viewport | Extend alignment lines to full page (not just container) |
| Include small elements | Include SVG icons and elements smaller than 20px |
Info label
A floating panel showing:
- Element tag name and CSS classes
- Font family, size, weight, line height
- Foreground and background colors (with contrast ratio)
- Box model values (margin, padding, border)
- Element dimensions
Significant element detection
The internal alignment feature filters elements to reduce noise:
Included: buttons, links, inputs, headings (h1-h6), paragraphs, images, containers with content
Excluded: SVG/icons, tiny elements (smaller than 20px), purely decorative elements
The algorithm uses a 3px edge tolerance to avoid duplicate lines and limits traversal to 4 levels even in deep mode.