Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1048322 of Examine and edit the box model

  • Revision slug: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model
  • Revision title: Examine and edit the box model
  • Revision id: 1048322
  • Created:
  • Creator: wbamberg
  • Is current revision? No
  • Comment
Tags: 

Revision Content

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:

{{EmbedYouTube("vDRzN-svJHQ")}}

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

{{EmbedYouTube("xA4IxTttNLk")}}

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:

Starting in Firefox 41, if you hover over part of the box model in the Box Model view, the corresponding part of the page is highlighted:

{{EmbedYouTube("DgyXdB4MCLY")}}

Editing the box model

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

{{EmbedYouTube("jij8IXYzpcA")}}

Revision Source

<h2 id="Viewing_the_box_model">Viewing the box model</h2>

<p>With the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">Select Element button</a> pressed, if you hover over an element in the page, the <a href="/en-US/docs/Web/CSS/box_model">box model</a> for the element is shown overlaid on the page:</p>

<p>{{EmbedYouTube("vDRzN-svJHQ")}}</p>

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

<p>{{EmbedYouTube("xA4IxTttNLk")}}</p>

<p>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:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10349/inline-box-model.png" style="display:block; height:186px; margin-left:auto; margin-right:auto; width:351px" /></p>

<h3 id="The_Box_Model_view">The Box Model view</h3>

<p>When an element's selected, you can get a detailed look at the box model in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Box_Model_view">Box Model view</a>:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10875/box-model-view.png" style="display:block; height:330px; margin-left:auto; margin-right:auto; width:515px" /></p>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/10877/box-model-view-tooltip.png" style="display:block; height:322px; margin-left:auto; margin-right:auto; width:630px" /></p>

<p>Starting in Firefox 41, if you hover over part of the box model in the Box Model view, the corresponding part of the page is highlighted:</p>

<p>{{EmbedYouTube("DgyXdB4MCLY")}}</p>

<h2 id="Editing_the_box_model">Editing the box model</h2>

<p>You can also edit the values in the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#The_Box_Model_view">Box Model view</a>, and see the results immediately in the page:</p>

<p>{{EmbedYouTube("jij8IXYzpcA")}}</p>
Revert to this revision