Box model

  • Revision slug: CSS/box_model
  • Revision title: Box model
  • Revision id: 60701
  • Created:
  • Creator: Miken32
  • Is current revision? No
  • Comment 4 words removed; page display name changed to 'box model'

Revision Content

{{ CSSRef() }}

Summary

A box in CSS has four edges, the margin edge, border edge, padding edge, and content edge as illustrated by the following diagram:

boxmodel.png

The margin area is the area inside the margin edge, and its dimensions are the margin-box width and margin-box height.

The border area is the area inside the border edge, and its dimensions are the border-box width and border-box height.

The padding area is the area inside the padding edge, and its dimensions are the padding-box width and padding-box height.

The content area is the area inside the edge, and its dimensions are the content width (or content-box width) and content height (or content-box height).

Notes

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

For non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the line-height property, even though the border and padding appear visually around the content.

Specification

{{ languages( { "fr": "fr/CSS/Mod\u00e8le_de_bo\u00eete", "de": "de/CSS/Boxmodell" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>A box in CSS has four edges, the <strong>margin edge</strong>, <strong>border edge</strong>, <strong>padding edge</strong>, and <strong>content edge</strong> as illustrated by the following diagram:</p>
<p style="text-align: center;"><img alt="boxmodel.png" class="internal default" src="/@api/deki/files/2834/=boxmodel.png?size=webview" style="width: 550px; height: 384px;"></p>
<p>The <strong>margin area</strong> is the area inside the margin edge, and its dimensions are the <strong>margin-box width</strong> and <strong>margin-box height</strong>.</p>
<p>The <strong>border area</strong> is the area inside the border edge, and its dimensions are the <strong>border-box width</strong> and <strong>border-box height</strong>.</p>
<p>The <strong>padding area</strong> is the area inside the padding edge, and its dimensions are the <strong>padding-box width</strong> and <strong>padding-box height</strong>.</p>
<p>The <strong>content area</strong> is the area inside the edge, and its dimensions are the <strong>content width</strong> (or <strong>content-box width</strong>) and <strong>content height</strong> (or <strong>content-box height</strong>).</p>
<h3 name="Notes">Notes</h3>
<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>For non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a> property, even though the border and padding appear visually around the content.</p>
<h3 name="Specification">Specification</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/REC-CSS1#formatting-model">CSS 1</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">CSS 2.1</a></li>
</ul>

<p>{{ languages( { "fr": "fr/CSS/Mod\u00e8le_de_bo\u00eete", "de": "de/CSS/Boxmodell" } ) }}</p>
Revert to this revision