Skip to content

Commit 0b043c2

Browse files
howcomhowcom
committed
[css2] 8 new border properties have been added. Yuck.
Some of the description has been tweaked, hppefully to the better. --HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%40378
1 parent cf9b937 commit 0b043c2

1 file changed

Lines changed: 106 additions & 67 deletions

File tree

‎css2/box.src‎

Lines changed: 106 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22
<html lang="en">
3-
<!-- $Id: box.src,v 1.2 1997-10-30 08:27:57 ian Exp $ -->
3+
<!-- $Id: box.src,v 1.3 1997-11-04 17:15:49 howcome Exp $ -->
44
<HEAD>
55
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66
<TITLE>Box rendering type</TITLE>
77
<LINK rel="next" href="flowobj.html">
88
<LINK rel="previous" href="media.html">
99
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
1010
</HEAD>
11+
1112
<BODY>
12-
<H1 align="center">Box rendering type</H1>
13-
<H2><a name="box-model">Introduction to the box rendering type</a></H2>
13+
14+
<H1 align="center">The box model</H1>
15+
16+
<H2><a name="box-model">Introduction to the box model</a></H2>
1417

1518
<P>The CSS box model describes the box <a
16-
href="process.html#renderobj">rendering object</a> type. This type is
19+
href="process.html#renderobj">rendering object</a>. This object is
1720
characterized in particular by three groups of properties: <a
1821
href="#margin-properties">margin</a>, <a
1922
href="#padding-properties">padding</a>, and <a
@@ -22,11 +25,11 @@ href="#border-properties">border</a>, described below.
2225
<P>For information on the <em>layout</em> of boxes, please consult the
2326
section on the <a href="flowobj.html">visual flow model</a>.
2427

25-
<P>The box model is slightly different for the case of <a
26-
href="paged.html">paged media.</a> Please consult the section on <a
27-
href="paged.html#page-boxes">page boxes</a> for more information.
28+
<P>The <A HREF="page.html">page box</A> is a special kind of box which
29+
is described in detail on the section on <A href="page.html">paged
30+
media</a>.
2831

29-
<H3><a name="box-dimensions">Box dimensions</a></H3>
32+
<H2><a name="box-dimensions">Box dimensions</a></H2>
3033

3134
<P>Each box has a core content area (e.g., text, an image, etc.) and
3235
optional surrounding padding, border and margin areas. The following
@@ -37,17 +40,21 @@ padding:</P>
3740
<img src="./images/boxdim.gif"
3841
alt="Image illustrating the relationship between content, padding, borders, and margins.">
3942

40-
<P>The width (resp., height) of the box is given by the sum of the
41-
content width (resp., height), the padding, the border, and the margin.
42-
The size of the margin, border and padding are set with the <a
43-
href="#margin-properties">margin</a>, <a
43+
<P>The width (resp., height) of the <EM>box</EM> is given by the sum
44+
of the content width (resp., height), the padding, the border, and the
45+
margin. The size of the margin, border and padding are set with the
46+
<a href="#margin-properties">margin</a>, <a
4447
href="#padding-properties">padding</a>, and <a
45-
href="#border-properties">border</a> properties, respectively.
48+
href="#border-properties">border</a> properties, respectively.
49+
50+
<P>The width of the <EM>element</EM> is the width of the content,
51+
i.e., the distance between left inner edge and right inner edge. The
52+
height of the element is the height of the content, i.e., the distance
53+
from inner top to inner bottom.
4654

47-
<P> The <EM>left outer edge</EM> is the edge of an element with its
48-
padding, border, and margin taken into account. The <EM>left inner
49-
edge</EM> is the edge of the content only, inside any padding, border
50-
or margin. The same holds for the <em>right inner edge</em>.
55+
<P>The <EM>outer edge</EM> is the edge of an element including its
56+
padding, border, and margin. The <EM>inner edge</EM> is the edge of
57+
the content only, inside any padding, border or margin.
5158

5259
<P>The <EM>top</EM> is the top of the object including any padding,
5360
border and margin; it is only defined for <a
@@ -61,31 +68,18 @@ href="flowobj.html#floats">floating elements</a>, not for non-floating
6168
bottom</EM> is the bottom of the element, inside any padding, border
6269
and margin.
6370

64-
<P> The <EM>width</EM> of an element is the width of the content,
65-
i.e., the distance between left inner edge and right inner edge. The
66-
<EM>height</EM> is the height of the content, i.e., the distance from
67-
inner top to inner bottom.
68-
6971
<P>In the following sections, we define the properties that allow
70-
authors to set margins, padding, and borders.
71-
72-
<div class="note"><P>
73-
<em><strong>Note.</strong>
74-
The properties that specify the foreground and background colors of
75-
an element's content and padding area are described in the section on
76-
<a href="colors.html">colors and backgrounds</a>. Border colors and
77-
styles are set with the <a href="#border-properties">border
78-
properties</a>. Margins are always transparent so the background
79-
of the parent element always shines through.
80-
</em>
81-
</div>
72+
authors to set margins, padding, and borders. There are no properties
73+
to set the color of margins and padding; margins are always
74+
transparent and padding areas always uses the background of the
75+
element itself.
8276

83-
<H3><a name="margin-properties">Margin properties</a>:
77+
<H2><a name="margin-properties">Margin properties</a>:
8478
<span class="propinst-margin-top">'margin-top'</span>,
8579
<span class="propinst-margin-right">'margin-right'</span>,
8680
<span class="propinst-margin-bottom">'margin-bottom'</span>,
8781
<span class="propinst-margin-left">'margin-left'</span>, and
88-
<span class="propinst-margin">'margin'</span></H3>
82+
<span class="propinst-margin">'margin'</span></H2>
8983

9084
<P>Margin properties set the margin of an element. The
9185
<span class="propinst-margin">'margin'</span> property sets the border
@@ -187,13 +181,13 @@ below:
187181
</PRE>
188182
</div>
189183

190-
<H3><a name="padding-properties">Padding properties</a>:
184+
<H2><a name="padding-properties">Padding properties</a>:
191185
<span class="propinst-padding-top">'padding-top'</span>,
192186
<span class="propinst-padding-right">'padding-right'</span>,
193187
<span class="propinst-padding-bottom">'padding-bottom'</span>,
194188
<span class="propinst-padding-left">'padding-left'</span>, and
195189
<span class="propinst-padding">'padding'</span>
196-
</H3>
190+
</H2>
197191

198192
<P> The
199193
padding properties describe how much space to insert between the
@@ -202,9 +196,9 @@ class="propinst-padding">'padding'</span> property sets the padding
202196
for all four sides while the other padding properties only set their
203197
respective side.
204198

205-
<H4><a name="border-width-defs">Values for </a><span class="index-def"
199+
<H3><a name="border-width-defs">Values for </a><span class="index-def"
206200
title="&lt;padding-width&gt;, definition of"><a
207-
name="value-def-padding-width">&lt;padding-width&gt;</a></span></H4>
201+
name="value-def-padding-width">&lt;padding-width&gt;</a></span></H3>
208202

209203
<P>The properties defined in this section refer to the
210204
<span class="value-inst-padding-width">&lt;padding-width&gt;</span>
@@ -294,25 +288,21 @@ relative to the element's font size: '1em' is equal to the size of the
294288
font in use.
295289
</div>
296290

297-
<H3><a name="border-properties">Border properties</a>: <span
298-
class="propinst-border-top-width">'border-top-width'</span>, <span
299-
class="propinst-border-right-width">'border-right-width'</span>, <span
300-
class="propinst-border-bottom-width">'border-bottom-width'</span>,
301-
<span class="propinst-border-left-width">'border-left-width'</span>,
302-
<span class="propinst-border-width">'border-width'</span>,
303-
<span class="propinst-border-color">'border-color'</span>,
304-
<span class="propinst-border-style">'border-style'</span>,
305-
<span class="propinst-border-top">'border-top'</span>,
306-
<span class="propinst-border-bottom">'border-bottom'</span>,
307-
<span class="propinst-border-right">'border-right'</span>,
308-
<span class="propinst-border-left">'border-left'</span>, and
309-
<span class="propinst-border">'border'</span>
310-
</H3>
291+
292+
<H2><a name="border-properties">Border properties</a></H2>
311293

312294
<P>The border properties set the borders of an element. Each element
313295
has four borders, one on each side, that are defined by their width,
314296
color and style.
315297

298+
<H3><a name="border-width">Border width</A>: <span
299+
class="propinst-border-top-width">'border-top-width'</span>, <span
300+
class="propinst-border-right-width">'border-right-width'</span>, <span
301+
class="propinst-border-bottom-width">'border-bottom-width'</span>,
302+
<span class="propinst-border-left-width">'border-left-width'</span>, and
303+
<span class="propinst-border-width">'border-width'</span></H3>
304+
305+
316306
<H4><a name="border-width-defs">Values for </a><span class="index-def"
317307
title="&lt;border-width&gt;, definition of"><a
318308
name="value-def-border-width"
@@ -403,9 +393,23 @@ of the top, right, bottom and left borders:
403393
</PRE>
404394
</div>
405395

396+
397+
398+
<H3><A NAME="border-color">Border color</A>:
399+
<span class="propinst-border-top-color">'border-top-color'</span>,
400+
<span class="propinst-border-right-color">'border-right-color'</span>,
401+
<span class="propinst-border-bottom-color">'border-bottom-color'</span>,
402+
<span class="propinst-border-left-color">'border-left-color'</span>, and
403+
<span class="propinst-border-left">'border-color'</span>
404+
</H3>
405+
406+
<!-- #include src=properties/border-top-color.srb -->
407+
<!-- #include src=properties/border-right-color.srb -->
408+
<!-- #include src=properties/border-bottom-color.srb -->
409+
<!-- #include src=properties/border-left-color.srb -->
406410
<!-- #include src=properties/border-color.srb -->
407411

408-
<P> The <span class="propinst-border-color">'border-color'</span>
412+
<P>The <span class="propinst-border-color">'border-color'</span>
409413
property sets the color of the four borders. <span
410414
class="propinst-border-color">'border-color'</span> can have from one
411415
to four values, and the values are set on the different sides as for
@@ -426,6 +430,30 @@ will take its place:
426430
<P> In the above example, the border will be a solid black line.
427431
</div>
428432

433+
434+
<H3><A NAME="border-style">Border style</a>:
435+
<span class="propinst-border-top-style">'border-top-style'</span>,
436+
<span class="propinst-border-right-style">'border-right-style'</span>,
437+
<span class="propinst-border-bottom-style">'border-bottom-style'</span>,
438+
<span class="propinst-border-left-style">'border-left-style'</span>, and
439+
<span class="propinst-border-style">'border-style'</span></H3>
440+
441+
442+
<H4>Values for &lt;border-style&gt;</H4>
443+
444+
<P>The border style properties refer to the &lt;border-style&gt; value
445+
type which is defined as follows:
446+
447+
<UL>
448+
<LI>none | dotted | dashed | solid | double | groove | ridge | inset |
449+
outset
450+
</UL>
451+
452+
453+
<!-- #include src=properties/border-top-style.srb -->
454+
<!-- #include src=properties/border-right-style.srb -->
455+
<!-- #include src=properties/border-bottom-style.srb -->
456+
<!-- #include src=properties/border-left-style.srb -->
429457
<!-- #include src=properties/border-style.srb -->
430458

431459
<P> The <span class="propinst-border-style">'border-style'</span> property sets the style of the
@@ -495,6 +523,17 @@ class="propinst-color">'color'</span> property.
495523
'groove', 'ridge', 'inset' and 'outset' as 'solid'. See the section on <a
496524
href="convent.html#conformance">conformance</a> for details.
497525

526+
527+
528+
<span class="propinst-border-top">'border-top'</span>,
529+
<span class="propinst-border-bottom">'border-bottom'</span>,
530+
<span class="propinst-border-right">'border-right'</span>,
531+
<span class="propinst-border-left">'border-left'</span>, and
532+
<span class="propinst-border">'border'</span>
533+
534+
535+
536+
498537
<!-- #include src=properties/border-top.srb -->
499538

500539
<P> This is a shorthand property for setting the width, style and
@@ -582,7 +621,7 @@ Consider this example:
582621

583622
<P> In the above example, the color of the left border will be black,
584623
while the other borders are red. This is due to <span
585-
class="propinst-border-left">'border-left'</span>&gt; setting the
624+
class="propinst-border-left">'border-left'</span> setting the
586625
width, style and color. Since the color value is not given by the
587626
<span class="propinst-border-left">'border-left'</span> property, it
588627
will be taken from the <span class="propinst-color">'color'</span>
@@ -592,7 +631,7 @@ class="propinst-border-left">'border-left'</span> property is not
592631
relevant.
593632
</div>
594633

595-
<H3><a name="mpb-examples">Example of margins, padding, and borders</a></H3>
634+
<H2><a name="mpb-examples">Example of margins, padding, and borders</a></H2>
596635

597636
This example illustrates how margins, padding, and borders
598637
interact. The example HTML document:
@@ -603,15 +642,15 @@ interact. The example HTML document:
603642
background: orange;
604643
margin: 12px 12px 12px 12px
605644
padding: 3px 3px 3px 3px
606-
/* No borders by default. */
645+
/* No borders set */
607646
}
608647
LI {
609648
color: white; /* text color is white */
610649
background: blue; /* Content, padding will be blue */
611650
margin: 12px 12px 12px 12px
612651
padding: 12px 0px 12px 12px /* Note 0px padding right */
613652
list-style: none /* no glyphs before a list item */
614-
/* No borders by default. */
653+
/* No borders set */
615654
}
616655
LI.withborder {
617656
border-style: dashed;
@@ -663,21 +702,21 @@ details). Note that <a
663702
href="flowobj2.html#collapsing-margins">vertical margins between the
664703
LI boxes collapse.</a>
665704

666-
<li>By default, borders have zero width. The only non-zero border in
667-
this example is the green, medium dashed line surrounding the second
668-
list item's padding.
705+
<li>The initial border style is 'none', and this value must be changed
706+
for a border to be rendered. In the example above, only the second
707+
list-item element changes the border style.
669708

670709
<li>The right side padding of the LI elements has been set to zero
671710
width. The effect is apparent in the second illustration.
672711

673712
<li>The foreground color of the LI elements has been set
674713
to white for legibility against a blue background.
675714

676-
<li>The margins and padding of the LI elements are transparent (by
677-
default), so the background color of the UL elements (orange) shines
678-
through the transparent LI margins. However, the (blue) background
679-
color (blue) of the LI elements changes the color of the LI padding
680-
and content.
715+
<li>The margins and padding of the LI elements are transparent (due to
716+
the initial value), so the background color of the UL elements
717+
(orange) shines through the transparent LI margins. However, the
718+
(blue) background color (blue) of the LI elements changes the color of
719+
the LI padding and content.
681720

682721
<li>Although padding and margin properties are not inherited, the LI
683722
elements are still offset by the UL margin.

0 commit comments

Comments
 (0)