mozilla

Revision 60700 of Box model

  • Revision slug: CSS/box_model
  • Revision title: Box model
  • Revision id: 60700
  • Created:
  • Creator: Michael2402
  • Is current revision? No
  • Comment added link to german page
Tags: 

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:

 DIAGRAM TO BE WRITTEN

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 <b>margin edge</b>, <b>border edge</b>, <b>padding edge</b>, and <b>content edge</b> as illustrated by the following diagram:
</p>
<pre class="eval"> DIAGRAM TO BE WRITTEN
</pre>
<p>The <b>margin area</b> is the area inside the margin edge, and its dimensions are the <b>margin-box width</b> and <b>margin-box height</b>.
</p><p>The <b>border area</b> is the area inside the border edge, and its dimensions are the <b>border-box width</b> and <b>border-box height</b>.
</p><p>The <b>padding area</b> is the area inside the padding edge, and its dimensions are the <b>padding-box width</b> and <b>padding-box height</b>.
</p><p>The <b>content area</b> is the area inside the edge, and its dimensions are the <b>content width</b> (or <b>content-box width</b>) and <b>content height</b> (or <b>content-box height</b>).
</p>
<h3 name="Notes"> Notes </h3>
<p>When <a href="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">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>
<div class="noinclude">
</div>
{{ languages( { "fr": "fr/CSS/Mod\u00e8le_de_bo\u00eete", "de": "de/CSS/Boxmodell" } ) }}
Revert to this revision