Tuesday 07th of July 2015 07:31:21 PM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: Y

There are no index entries for this letter.

Symbols | A | B | C | D | E | F | G | H | I | J | K a block-level element. According to theCSS specification, declaringline-height on a block-level element sets aminimum line-box height for the content of thatblock-level element. Thus, declaring P.spacious{line-height: 24pt;} means thatthe minimum height for each line box is 24 points. Technically, theonly way content will inherit this line height is if it is inheritedby an inline element. Most text isn't contained by an inlineelement. Thus, if we pretend that each line is contained by the | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

<TR> <TD>sidebar</TD> <TD>navigation bar and main display</TD> </TR> </TABLE>

We'll turn to the sidebar first. Each set of links is grouped into a list under a main heading; these headings look different from the links. Each of the sections uses the following tags:

Whew! Already we have our work cut out for us.

BODY {color: rgb(0%,50%,0%); background-color: #CCFFCC;}H1, H2 {color: yellow; background-color: rgb(0,51,0);}
Figure 6-19

Figure 6-19. The results of a simple style sheet

This style sheet is more sophisticated (shown in Figure 6-20):

BODY {color: black; background-color: white;}P {color: #333;}PRE, CODE, TT {color: rgb(50%,50%,50%); background-color: #FFFFCC;}A:link {color: blue; background-color: yellow;}A:visited {color: navy; background-color: white;}

padding-top, padding-right, padding-bottom, padding-left


<length> | <percentage>

Initial value

Now the line-height comes into play. Let's assume the following case:

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

What we have here is a situation where some of the text has ahigh, and the content area is what will be surrounded with the border.

This behavior can be altered by assigning padding to the inline element, which will push the borders away from the text itself (shown in Figure 8-58):

SPAN {border: 1px dashed black; padding: 4pt;}
Figure 8-58

Figure 8-58. Inline padding and line-box layout

Note that this padding does not alter the actual shape of the