Revision 912135 of Introduction to the CSS box model

<p>{{CSSRef}}</p>

<h2 id="Summary">Summary</h2>

<p>In a document, each element is represented as a rectangular box. Determining the size, properties — like its color, background, borders aspect — and the position of these boxes is the goal of the rendering engine.</p>

<p>In CSS, each of these rectangular boxes is described using the standard <em>box model</em>. This model describes the content of the space taken by an element. Each box has four edges: the <strong>margin edge</strong>, <strong>border edge</strong>, <strong>padding edge</strong>, and <strong>content edge</strong>.</p>

<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height:384px; width:548px" /></p>

<p><a name="content"></a>The <strong>content area</strong> is the area containing the real content of the element. It often has a background, a color or an image (in that order, an opaque image hiding the background color) and is located inside the <em>content edge</em>; its dimensions are the <em>content width</em>, or <em>content-box width</em>, and the <em>content height</em>, or <em>content-box height</em>.</p>

<p>If the CSS {{ cssxref("box-sizing") }} property is set to default, the CSS properties {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }} control the content size.</p>

<p><a name="padding"></a>The <strong>padding area</strong> extends to the border surrounding the padding. When the content area has a background, color, or image set on it, this will extend into the padding, which is why you can think of the padding as extending the content. The padding is located inside the <em>padding edge</em>, and its dimensions are the <em>padding-box width</em> and the <em>padding-box height</em>.</p>

<p>The space between the padding and the content edge can be controlled using the {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} and the shorthand {{ cssxref("padding") }} CSS properties.</p>

<p><a name="border"></a>The <strong>border area</strong> extends the padding area to the area containing the borders. It is the area inside the <em>border edge</em>, and its dimensions are the <em>border-box width</em> and the <em>border-box height</em>. This area depends on&nbsp;the size of the border that is defined by the {{ cssxref("border-width") }} property or the shorthand {{ cssxref("border") }}.</p>

<p><a name="margin"></a>The <strong>margin area</strong> extends the border area with an empty area used to separate the element from its neighbors. It is the area inside the <em>margin edge</em>, and its dimensions are the <em>margin-box width </em>and the <em>margin-box height</em>.</p>

<p>The size of the margin area is controlled using the {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} and the shorthand {{ cssxref("margin") }} CSS properties.</p>

<p>When <a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a> happens, the margin area is not clearly defined since margins are shared between boxes.</p>

<p>Finally, note that, for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the {{ cssxref('line-height') }} property, even though the border and padding appear visually around the content.</p>

<h2 id="Specification">Specification</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Though more precisely worded, there is no practical change</td>
  </tr>
  <tr>
   <td>{{ SpecName("CSS1","#formatting-model")}}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
 <li>{{ CSS_key_concepts() }}</li>
 <li>Related CSS properties: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }},&nbsp;{{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li>
</ul>