Revision 1047972 of Examine and edit the box model

<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>

<h3 id="Editing_values_in_Box_Model_view">Editing values in Box Model view</h3>

<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>

<h3 id="Editing_box_model_in_content">Editing box model in content</h3>

<div class="geckoVersionNote">New in Firefox 48</div>

<p>Starting in Firefox 48, it is possible to move absolutely positioned elements inline. That means, if an element has its <code>{{cssxref("position")}}</code> property set to <code>absolute</code>, <code>relative</code> or <code>fixed</code> and one or more of the {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} or {{cssxref("right")}} properties, a button is shown besides the positioning value. Clicking that button enables inline editing of the element within the page.</p>

<p><img alt="Example for changing the position of an element within the content" src="https://mdn.mozillademos.org/files/12986/in-content-box-model-editing.png" style="display:block; height:215px; margin-left:auto; margin-right:auto; width:388px" /></p>

<p>The element's position can be changed by dragging the handles on the edges. If the element is absolutely positioned, dashed lines are shown representing the offset parent. For relatively positioned elements the dashed lines indicate the original position of the node. The offsets are indicated by a line and a tooltip for each side.</p>

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