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