Box model

  • Revision slug: CSS/box_model
  • Revision title: Box model
  • Revision id: 60694
  • Created:
  • Creator: DBaron
  • Is current revision? No
  • Comment

Revision Content

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

Revision Source

<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>
Revert to this revision