Box Model Overlay
The box model overlay visualises the margin, border, padding, and content areas of any inspected element. It is available in Inspect and Measure modes.
Enabling
- Press
Bto toggle the overlay. - Or use the Box model toggle in the control panel.
Colour coding
| Layer | Colour |
|---|---|
| Content | Blue (rgba(74,158,255,0.15)) |
| Padding | Green (rgba(80,200,140,0.15)) |
| Border | Amber (rgba(255,200,80,0.15)) |
| Margin | Coral (rgba(255,130,80,0.15)) |
Each layer has a subtle dashed border in the same colour family.
Detail panel
Click any element in Inspect mode to open the detail panel with exact computed values for each side. Values come from window.getComputedStyle() — they reflect the rendered layout, not the stylesheet source.