Examine and edit the box model

Viewing the box model

With the Select Element button pressed, if you hover over an element in the page, the box model for the element is shown overlaid on the page:

It's also shown overlaid if you hover over an element's markup in the HTML pane:

From Firefox 39, if the element is inline and is split over multiple line boxes, the highlighter shows each individual line box that together make up the element:

The Box Model view

When an element's selected, you can get a detailed look at the box model in the Box Model view:

Starting in Firefox 40, if you hover over a value, you'll see a tooltip telling you which rule the value comes from:

If you hover over part of the box model in the Box Model view, the corresponding part of the page is highlighted:

Editing the box model

You can also edit the values in the Box Model view, and see the results immediately in the page:

Document Tags and Contributors

Tags: 
 Contributors to this page: wbamberg, Sebastianz, kscarfone
 Last updated by: wbamberg,