============================== Examine and edit the box model ============================== Viewing the box model ********************* With the :ref:`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: .. raw:: html

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

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: .. image:: inline-box-model.png :class: center .. _page-inspector-how-to-examine-and-edit-the-box-model-view: The Box Model view ------------------ When an element's selected, you can get a detailed look at the box model in the :ref:`Box Model view `: .. image:: box-model.png :class: center If you hover over a value, you'll see a tooltip telling you which rule the value comes from: .. image:: box-model-tooltip.png :class: center Editing the box model ********************* You can also edit the values in the :ref:`Box Model view `, and see the results immediately in the page.