Box Model Overlay

The box model overlay is available in Inspect mode. It visualises the margin,

border, padding, and content areas of any inspected element.

Enabling

• Press B to toggle the box model overlay.
• Or use the Show box model toggle in the popup (only active in Inspect mode).

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.

Data source

Values are read from window.getComputedStyle() on the inspected element, so

they reflect actual computed styles — not the stylesheet source values.