Chapter 8. Visual Formatting

8.2.1.1. Height

<html>
<body bgcolor=”maroon”>
<P STYLE =”height:10em”>
In general, the height of an element is determined by its content. This can be affected by its width, of course; the skinnier a paragraph becomes, for

example, the taller it has to be in order to contain all of the textual (and other) content.</p>
<P STYLE=”height: 3em”>In practice, most browsers will not

do this. They will instead simply increase the height of the element, as though the value of height had been set to auto. This is permitted under CSS1, which

states that browsers can ignore any value of height other than auto if an element is not a replaced element such as an image. Under CSS2, it is possible to

set up a situation where scrollbars would be applied to an element such as a paragraph.
</p>
</body>
</html>

8.2.1.1
8.2.2. Horizontal Formatting

<html>
<body bgcolor=”maroon”>
<IMG SRC=”test1.gif” STYLE=”margin: 5px;” ALT=”first test”>
<IMG SRC=”test2.gif” STYLE=”margin: 5px;” ALT=”second test”>
</body>
</html>

8.2.2
8.2.2.4. Negative margins

<html>
<body bgcolor=”maroon”>
<DIV STYLE=”width: 420px; background-color: silver; padding: 10px; margin-top: 75px;”>
<P CLASSS=”neg”>
A paragraph.
</P>
</DIV><BR>
<DIV STYLE=”width: 420px; background-color: silver;padding: 10px; margin-top: 75px;”>
<P>A paragraph.</P>
</DIV><P>The next paragraph.</P>
</body></html>
8.2.2.4

8.2.4. Block-Level Replaced Elements
<html>
<body bgcolor=”maroon”>
<IMG SRC=”01.jpg” STYLE=”display: block;” ALT=”test image”>
<IMG SRC=”02.jpg” STYLE=”display: block; height: 50px;” ALT=”test image”>
<IMG SRC=”03.jpg” STYLE=”display: block; height: 200px;” ALT=”test image”>
</body>
</html>

8.2.4

8.4.2. Inline Formatting

<html>
<body bgcolor=”aqua”>
<P STYLE=”line-height: 0.25em;”>
Without content, the paragraph won’t have anything to display, so it will not. The fact that this paragraph has a line-height of any value — be it 0.25em or

25in — makes no difference without inline content to take advantage of it.In a certain sense, then, each line of text contained within a block-level element

is its own inline element, even though it isn’t surrounded by any tags. If you like, picture a fictional tag sequence something like this:
</P>
<P><LINE>This is a paragraph with a number of</LINE>
<LINE>lines of text which make up the</LINE>
<LINE>contents.</LINE>
</P>
</body>
</html>

8.4.2
8.4.2.1. Generating a line box

<html>
<body bgcolor=”aqua”>
<P STYLE=”font-size: 12px; line-height: 12px;”>
This is text, <EM>some of which is emphasized</EM>,
plus other text<BR>
which is <B STYLE=”font-size: 24px;”>boldfaced</B> and which is<BR>
larger than the surrounding text.</P><br>
<P STYLE=”font-size: 12px; line-height: 12px;”>
This is text, <EM>some of which is emphasized</EM>,
plus other text<BR>which is <B STYLE=”font-size: 24px;”>boldfaced</B>
and <SPAN STYLE=”vertical-align: top;”>tall</SPAN> and which is<BR>
larger than the surrounding text.
</P><br>
<P STYLE=”font-size: 12px; line-height: 12px;”>
This is text, <EM>some of which is emphasized</EM>, plus other text<BR>
which is <B STYLE=”font-size: 24px;”>boldfaced</B>
and <SPAN STYLE=”vertical-align: top; line-height: 4px;”>tall</SPAN> and which is<BR>
larger than the surrounding text.
</P><br>
<P STYLE=”font-size: 12px; line-height: 12px;”>
This is text, <EM>some of which is emphasized</EM>, plus other text<BR>which is <B STYLE=”font-size: 24px;”>boldfaced</B>
and <SPAN STYLE=”vertical-align: top; line-height: 18px;”>tall</SPAN>
and which is<BR>larger than the surrounding text.
</P>
</body>
</html>

8.4.2.1

8.4.3.1. Scaling the line heights

<html>
<body bgcolor=”aqua”>
<P>This paragraph has a line-height of 1.5 times its font-size. In addition,any elements within it <SMALL>such as this small element</SMALL>
also have line-heights 1.5 time their font-size… and that includes <BIG>this big element right here</BIG>.
By using a scaling factor, line-heights scaleto match the font-size of any element.</P>
</body>
</html>

8.4.3.1
8.4.4. Inline Replaced Elements
<html>
<body bgcolor=”gray”>
<P>The image in this paragraph
<IMG SRC=”test.gif” ALT=”test image”>
will be raised 9px.</P>
</body>
</html>

8.4.4