Box model

  • Revision slug: Web/CSS/box_model
  • Revision title: Box model
  • Revision id: 395201
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Moved From CSS/box_model to Web/CSS/box_model

Revision Content

Summary

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.

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

The content area is the area containing the real content of the element. It is located inside the content edge, and its dimensions are the content width, or content-box width, and the content height, or content-box height.

If the CSS {{ cssxref("box-sizing") }} property is not set to another value than its default, the CSS properties {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }} controls the content size.

The padding area extends the content area with the empty area between the content and the eventual borders surrounding it. 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 padding edge. Its dimensions are the padding-box width and the padding-box height.

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.

The border area extends the padding area with the area containing the borders. It is the area inside the border edge, and its dimensions are the border-box width and the border-box height. This area depends of the size of the border that is defined by the {{ cssxref("border-width") }} property or the shorthand {{ cssxref("border") }}.

The margin area extends the border area with an empty area used to separate the element from its neighbors. It is the area inside the margin edge, and its dimensions are the margin-box width and the margin-box height.

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.

When margin collapsing happens, the margin area is not clearly defined since margins are shared between boxes.

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.

Specification

Specification Status Comment
CSS Level 2 (revision 1) {{ Spec2('CSS2.1') }} Though more precisely worded, there is no practical change
CSS Level 1 {{ Spec2('CSS1') }}  

See also

  • CSS Reference
  • {{ CSS_key_concepts() }}
  • Related CSS properties: {{ cssxref("box-sizing") }}, {{ 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") }}

Revision Source

<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="" src="/files/72/boxmodel%20(1).png" style="width: 550px; height: 385px;" /></p>
<p><a name="content">The <strong>content area</strong> is the area containing the real content of the element. It is located inside the <em>content edge</em>, and its dimensions are the <em>content width</em>, or <em>content-box width</em>, and the <em>content height</em>, or content-box height.</a></p>
<p><a name="content"> </a></p>
<p><a name="content">If the CSS {{ cssxref("box-sizing") }} property is not set to another value than its default, the CSS properties {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }} controls the content size.</a></p>
<p><a name="content"></a><a name="padding">The <strong>padding area</strong> extends the content area with the empty area between the content and the eventual borders surrounding it. 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>padding edge</em>. Its dimensions are the <em>padding-box width</em> and the <em>padding-box height</em>.</a></p>
<p><a name="padding"> </a></p>
<p><a name="padding">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.</a></p>
<p><a name="padding"></a><a name="border">The <strong>border area</strong> extends the padding area with 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 of the size of the border that is defined by the {{ cssxref("border-width") }} property or the shorthand {{ cssxref("border") }}.</a></p>
<p><a name="border"> </a></p>
<p><a name="border"></a><a name="margin">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>.</a></p>
<p><a name="margin"> </a></p>
<p><a name="margin">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.</a></p>
<p><a name="margin">When </a><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 style="background-color: rgb(255, 204, 255);">
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions" title="http://www.w3.org/TR/CSS21/box.html#box-dimensions">CSS Level 2 (revision 1)</a></td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Though more precisely worded, there is no practical change</td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/REC-CSS1/#formatting-model" title="http://www.w3.org/TR/REC-CSS1/#formatting-model">CSS Level 1</a></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("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>
Revert to this revision