Chapter 7. Boxes and Borders

7.3.2. Percentages and Margins

<html>
<body bgcolor=”navy”>
<font color=”lime”>
<P>This paragraph is contained within a DIV which has a width of 200 pixels,
so its margin will be 10% of the width of the paragraph’s parent (the DIV).
Given the declared width of 200 pixels, the margin will be 20 pixels on
all sides.
</P>
</DIV>
<DIV STYLE=”width: 100px;”>
<P>This paragraph is contained within a DIV with a width of 100 pixels,
so its margin will still
be 10% of the width of the paragraph’s parent.
There will, therefore, be half as much margin on this
paragraph as that
on the first paragraph.</P></DIV>
<font color=”lime”>
</Font>
</body>
</html>

7.3.2

7.3.6. Negative Margin Values

<html>
<body Bgcolor=”maroon”>
<font color=”lime”>
There’s another side to margins: the negative side. That’s right, it’s possible to set
negative values for margins. This will have some interesting effects, assuming that a user agent supports
negative margins at all.

<P STYLE=”margin: -1.75em 0 0 0; font-weight: bold;”>
TIP

User agents are not,
according to the CSS1 specification, required to fully support negative margins, using the phrase, ”
A negative value is allowed, but there may be implementation-specific limits.” In the world of web browsers,
though Navigator 4.x, Explorer 4.x/5.x, and Opera 3.x do permit negative margins:
</p>Negative margins have an impact on vertical formatting, affecting how margins are collapsed.
If there are negative vertical margins, then the browser should take the absolute maximum of the
negative margins and subtract that from the maximum of any positive margins.

In the case where there
are only two margins to be collapsed, one positive and the other negative, the situation is handled
in a fairly simple manner. The absolute value of the negative margin is subtracted from the positive margin — or,
to put it another way, the negative is added to the positive — and the resulting value is the distance between
the elements.

To see what this means, let’s start with a paragraph that has a negative top margin and no margins
on its other sides — this will keep the example simple. In addition, we’ll make the paragraph bold, so that it’s
easier to distinguish from its neighbors: </Font>
</body>
</html>

7.3.6

7.3.7. Margins and Inline Elements

<html>
<body>
Let’s say that you want to set top and bottom margins on<B margin-top=”25px” margin-bottom=”50px”>
boldfaced text</b> <br><br>
</body>
</html>

7.3.7

7.3.8. Margins: Known Issues

<html>
<body>
<H1 margin-bottom”0″>
7.3.8. Margins: Known Issues</h1>
<P margin-top=”-1em”>

The first is that Navigator 4.x generally adds margin rules to its built-in margins,
instead of replacing the built-in values. For example, let’s say you want to eliminate the space
between H1 elements and paragraphs. Here’s the simplest case for doing so:

H1 {margin-bottom: 0;}
P {margin-top: 0;}

This is, after all, one correct way to eliminate the space between succeeding elements.
Navigator 4.x, however, will display the elements with the usual blank line between them, as you can see
in Figure 7-26. This is because it’s adding the zero values to its own default margins.  </p>
</body>
</html>

7.3.8

<html>
<body>
<STRONG margin-left=”10px”>Figure 7-28. Margins, inline elements, and Navigator 4.x</strong>
The style used to generate Figure 7-28 was as follows:
Instead of adding ten pixels of blank
space to the beginning of the STRONG element, Navigator assumes that the margin refers to the
eft edge of the browser window, and places the STRONG element accordingly This is utterly, completely wrong.
(There are those who speculate that Navigator turns the inline element into a block-level element,
but its placement implies that things may be otherwise. It’s difficult to be sure.) Unfortunately,
the fact that this happens means that the use of margins on inline elements is a risky proposition,
and not one to be undertaken lightly.
</body>
</html>

7.3.8.1
7.4.1.1. Multiple styles

<html>
<body><P.aside border-style=”solid dashed dotted solid”>
The result, shown in Figure 7-33, is a paragraph with a solid top border, a dashed right border,
a dotted bottom border, and a solid left border.
Figure 7-33 </p>
</body>
</html>

7.4.1.1

7.4.3. Border Colors

<html><body>
<Pshade border-style=”solid” border-width=”thick” color=”gray”>
The result, shown in Figure 7-33, is a paragraph with a solid top border, a dashed right border,
a dotted bottom border, and a solid left border.
Figure 7-33 </p>
</body>
</html>

7.4.3

7.5.1. Percentage Values and Padding

<html>
<body>
<DIV STYLE=”width: 200px;”>
<P>This paragraph is contained within a DIV which has a width of 200 pixels,
so its padding will be 10% of the width of the paragraph’s parent element.
Given the declared width of 200 pixels,
the padding will be 20 pixels on
all sides.</P>
</DIV>
<DIV STYLE=”width: 100px;”>
<P>This paragraph is contained within a DIV with a width of 100 pixels,so its padding will still be 10%
of the width of the paragraph’s parent.
There will, therefore, be half as much padding on this
paragraph as that
on the first paragraph.</P>
</body>
</html>

7.5.1

7.7.1. Types of Lists

<html>
<body>
<OL>
<LI>Item the first
<LI CLASS=”off”>Item the second
<LI>Item the third
<LI CLASS=”off”>Item the fourth
<LI>Item the fifth
</OL>
</body>
</html>

7.7.1