Skip to content

Commit ff5b86c

Browse files
ianbjacobsianbjacobs
committed
[css2] Added intro to box model and box model examples
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%40441
1 parent 4389413 commit ff5b86c

1 file changed

Lines changed: 170 additions & 15 deletions

File tree

‎css2/visuren.src‎

Lines changed: 170 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22
<html lang="en">
3-
<!-- $Id: visuren.src,v 1.40 1997-11-24 19:12:26 bbos Exp $ -->
3+
<!-- $Id: visuren.src,v 1.41 1997-11-25 23:51:48 ian Exp $ -->
44
<HEAD>
55
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66
<TITLE>Visual rendering model</TITLE>
77
<LINK rel="next" href="flowobj2.html">
8-
<LINK rel="previous" href="box.html">
8+
<LINK rel="previous" href="media.html">
99
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
1010
</HEAD>
1111
<BODY>
1212
<H1 align="center">Visual rendering model</H1>
1313

14+
<!-- Defined "containing block" -->
15+
1416
<H2>Introduction to the visual rendering model</H2>
1517

1618
<P>The following sections describe how user agents construct a tree of
17-
<a href="box.html">box</a> <a href="process.html#renderobj"> rendering
19+
box <a href="process.html#renderobj"> rendering
1820
objects</a>.
1921

20-
<P>Most elements in the <a href="process.html#doctree">document
22+
<P>Most elements in the <a href="convent.html#doctree">document
2123
tree</a> generate a corresponding box in the tree of rendering objects
2224
that participates in the formatting algorithms known as the <a
2325
href="#flow-model">visual flow model.</a> The dimensions of each
@@ -55,12 +57,165 @@ in the section on <a href="flowobj2.html#overflow">overflow</a>.
5557
letter-spacing algorithm). Conforming user agents may format
5658
differently for situations not covered in this specification.
5759

60+
<H2><a name="box-model">Introduction to the box model</a></H2>
61+
62+
<P>The CSS box model describes the box <a
63+
href="process.html#renderobj">rendering object</a>. This object is
64+
characterized in particular by three groups of properties: <a
65+
href="#margin-properties">margin</a>, <a
66+
href="#padding-properties">padding</a>, and <a
67+
href="#border-properties">border</a>, described below.
68+
69+
<P>For information on the <em>layout</em> of boxes, please consult the
70+
section on the <a href="#flow-model">visual flow model</a>.
71+
72+
<P>The <A HREF="page.html">page box</A> is a special kind of box which
73+
is described in detail on the section on <A href="page.html">paged
74+
media</a>.
75+
76+
<H3><a name="box-dimensions">Box dimensions</a></H3>
77+
78+
<P>Each box has a core content area (e.g., text, an image, etc.) and
79+
optional surrounding padding, border and margin areas. The following
80+
diagram illustrates how these areas relate and defines more precise
81+
terminology used to describe pieces of margin, border, and
82+
padding:</P>
83+
84+
<img src="./images/boxdim.gif"
85+
alt="Image illustrating the relationship between content, padding, borders, and margins.">
86+
87+
<P>The width (resp., height) of the <EM>box</EM> is given by the sum
88+
of the content width (resp., height), the padding, the border, and the
89+
margin. The size of the margin, border and padding are set with the
90+
<a href="#margin-properties">margin</a>, <a
91+
href="#padding-properties">padding</a>, and <a
92+
href="#border-properties">border</a> properties, respectively.
93+
94+
<P>The width of the <EM>element</EM> is the width of the content,
95+
i.e., the distance between left inner edge and right inner edge. The
96+
height of the element is the height of the content, i.e., the distance
97+
from inner top to inner bottom.
98+
99+
<P>The <EM>outer edge</EM> is the edge of an element including its
100+
padding, border, and margin. The <EM>inner edge</EM> is the edge of
101+
the content only, inside any padding, border or margin.
102+
103+
<P>The <EM>top</EM> is the top of the object including any padding,
104+
border and margin; it is only defined for <a
105+
href="#inline">inline</a> and floating elements, not for
106+
non-floating block-level elements. The <EM>inner top</EM> is the top
107+
of the content, inside any padding, border or margin. The
108+
<EM>bottom</EM> is the bottom of the element, outside any padding
109+
border and margin; it is only defined for inline and <a
110+
href="#floats">floating elements</a>, not for non-floating
111+
<a href="#block-level">block-level</a> elements. The <EM>inner
112+
bottom</EM> is the bottom of the element, inside any padding, border
113+
and margin.
114+
115+
<P>In the following sections, we define the properties that allow
116+
authors to set margins, padding, and borders. There are no properties
117+
to set the color of margins and padding; margins are always
118+
transparent and padding areas always uses the background of the
119+
element itself.
120+
121+
<H3><a name="mpb-examples">Example of margins, padding, and borders</a></H3>
122+
123+
This example illustrates how margins, padding, and borders
124+
interact. The example HTML document:
125+
126+
<PRE>
127+
&lt;STYLE type="text/css"&gt;
128+
UL {
129+
background: orange;
130+
margin: 12px 12px 12px 12px
131+
padding: 3px 3px 3px 3px
132+
/* No borders set */
133+
}
134+
LI {
135+
color: white; /* text color is white */
136+
background: blue; /* Content, padding will be blue */
137+
margin: 12px 12px 12px 12px
138+
padding: 12px 0px 12px 12px /* Note 0px padding right */
139+
list-style: none /* no glyphs before a list item */
140+
/* No borders set */
141+
}
142+
LI.withborder {
143+
border-style: dashed;
144+
border-width: medium; /* sets border width on all sides */
145+
border-color: green;
146+
}
147+
&lt;/STYLE&gt;
148+
&lt;UL&gt;
149+
&lt;LI&gt;First element of list
150+
&lt;LI class="withborder"&gt;Second element of list is longer
151+
to illustrate wrapping.
152+
&lt;/UL&gt;
153+
</PRE>
154+
155+
<P>results in a <a href="convent.html#doctree">document
156+
tree</a> with (among other relationships) a UL element that
157+
has two LI children. According to the <a href="flowobj.html#flow-model">
158+
visual rendering model</a>, the LI elements are
159+
laid out vertically (one after the other) and form the
160+
content of the UL.
161+
162+
<P>The first of the following diagrams illustrates what this example
163+
would produce. The second illustrates the relationship between the
164+
margins, padding, and borders of the UL elements and those of its
165+
children LI elements.</P>
166+
167+
<img src="./images/boxdimeg.gif"
168+
alt="Image illustrating how parent and child margins, borders,
169+
and padding relate.">
170+
171+
<P>Note that:</p>
172+
173+
<ul>
174+
<li>The width of content for each LI element has not been specified by
175+
the <span class="propinst-width">'width'</span> property. Therefore,
176+
according to the rules of the <a href="flowobj2.html#box-height">box
177+
height calculations</a>, the width allotted for the content of each LI
178+
element is the width of the parent element's (UL) content less the
179+
margins, padding, and border of the LI elements. The width of the UL
180+
element is determined by the width of its parent, not shown explicitly
181+
here.
182+
183+
<li>The height of each LI element's contents is determined by the
184+
height of the content. The height of the UL element's content is
185+
determined by the sum of the heights of the LI elements' content, plus
186+
LI margins, padding, and borders (see the section on <a
187+
href="flowobj2.html#box-height">box height calculations</a> for
188+
details). Note that <a
189+
href="flowobj2.html#collapsing-margins">vertical margins between the
190+
LI boxes collapse.</a>
191+
192+
<li>The initial border style is 'none', and this value must be changed
193+
for a border to be rendered. In the example above, only the second
194+
list-item element changes the border style.
195+
196+
<li>The right side padding of the LI elements has been set to zero
197+
width. The effect is apparent in the second illustration.
198+
199+
<li>The foreground color of the LI elements has been set
200+
to white for legibility against a blue background.
201+
202+
<li>The margins and padding of the LI elements are transparent (due to
203+
the initial value), so the background color of the UL elements
204+
(orange) shines through the transparent LI margins. However, the
205+
(blue) background color (blue) of the LI elements changes the color of
206+
the LI padding and content.
207+
208+
<li>Although padding and margin properties are not inherited, the LI
209+
elements are still offset by the UL margin.
210+
</ul>
211+
212+
58213
<H2><a name="flow-model">Establishing box positions</a></H2>
59214

60215
<P>The <span class="index-def" title="visual rendering
61216
model"><em>visual rendering model</em></span> describes how user
62-
agents generate a tree of <a href="box.html">box rendering
63-
objects</a>. The bulk of this model involves calculating the positions
217+
agents generate a tree of box rendering
218+
objects. The bulk of this model involves calculating the positions
64219
of boxes based on their dimensions, their position in the rendering
65220
tree, and the dimensions of the canvas.
66221

@@ -129,7 +284,7 @@ of the parent.
129284
</ul>
130285

131286
<P>For example, for an inline element like EM, the containing block is
132-
typically the enclosing paragaph (P). On the other hand, the
287+
typically the enclosing paragraph (P). On the other hand, the
133288
containing block of a positioned element is the element relative to
134289
which it is positioned.
135290

@@ -493,9 +648,9 @@ have this value.
493648
value of 'inline' generates an <a href="#inline">inline box</a>. The
494649
box is dimensioned according to the formatted size of the content. If
495650
the content is text, it may span several lines, and there will be a
496-
box on each line. The <a href="box.html#margin-properties">margin</a>, <a
497-
href="box.html#border-properties">border</a>, and <a
498-
href="box.html#padding-properties">padding</a> properties apply to 'inline'
651+
box on each line. The <a href="flowobj2.html#margin-properties">margin</a>, <a
652+
href="flowobj2.html#border-properties">border</a>, and <a
653+
href="flowobj2.html#padding-properties">padding</a> properties apply to 'inline'
499654
elements, but will not have any effect at the line breaks.
500655

501656
<P> The values 'table', 'row-group', 'column-group', 'row', 'column',
@@ -684,7 +839,7 @@ do not apply to them: <span class="propinst-float">'float'</span>,
684839
<span class="propinst-clear">'clear'</span>, <span
685840
class="propinst-display">'display'</span> (and therefore <span
686841
class="propinst-list-style-type">'list-style-type'</span>), and all
687-
the <a href="box.html#margin-properties">margin properties</a>.
842+
the <a href="flowobj2.html#margin-properties">margin properties</a>.
688843
-->
689844

690845
<p>Elements that are positioned with respect to a <span
@@ -694,7 +849,7 @@ title="absolute positioning"><em>absolutely positioned</em></span>.
694849

695850
<P>The default <a name="reference-box">reference box</a> is the box
696851
generated for the root element of the <a
697-
href="process.html#doctree">document tree</a>. However, an element
852+
href="convent.html#doctree">document tree</a>. However, an element
698853
for which the <span class="propinst-position">'position'</span>
699854
property has been set to a value other than 'static' establishes a new
700855
reference box. Absolutely positioned descendents of the element will
@@ -768,9 +923,9 @@ class="propinst-left">'left'</span>, <span
768923
class="propinst-right">'right'</span>, <span
769924
class="propinst-top">'top'</span>, and <span
770925
class="propinst-bottom">'bottom'</span> properties take over the roles
771-
of the corresponding <a href="box.html#margin-properties">margin properties</a>
772-
(i.e., absolutely positioned element boxes do not have margins but do
773-
have padding and borders).
926+
of the corresponding <a href="flowobj2.html#margin-properties">margin
927+
properties</a> (i.e., absolutely positioned element boxes do not have
928+
margins but do have padding and borders).
774929

775930
<P>For more information about the width and height of absolutely
776931
positioned elements, please consult the sections on <a

0 commit comments

Comments
 (0)