Thursday 17th of April 2014 02:34:45 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 automatically. This can have unintended effects. Consider the following:

H4 {border-style: dashed solid double;}
H4 {border: medium green;}

This will result in H4 elements having no border at all, because the lack of a border-style in the second rule means that the default value of none will be used. As we've seen, that will turn the border off altogether.

| Y | Z

Index: Z

z-axis: 9.5. Stacking Positioned Elements
z-index property: 9.5. Stacking Positioned Elements

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

Library Navigation Links

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

7.3.3. Replicating Values

Sometimes, the values you're entering for margin get a little repetitive:

P {margin: 0.25em 1em 0.25em 1em;}

The situation can become markedly different if we change the vertical alignment of the inline boxes. Suppose that we change the boldface text to have a vertical alignment of middle. This would have the result shown in Figure 8-53.

Figure 8-53

Figure 8-53. Changing the vertical alignment of the larger text

Here, the middle of the boldfaced text's inline box has lined up with the middle of the inline boxes of the other text in the line. Because the inline boxes are all 12px tall, and their middles are all lined up, this means that the line box for this line is now only 12

P {margin-left: auto; margin-right: 100px; width: 100px;} 

The results are shown in Figure 8-11.

Figure 8-11

Figure 8-11. Automatic left margin

In a sense, auto can be used to say, "makeup the difference between everything else and the requiredtotal." However, what if all three of these properties are setto 100px , and none of them toauto ?

Although it is sometimes important to set the width and height of anelement, this is not always necessary when positioning elements. Forexample, if the placement of the four sides of the element isdescribed using top, right,bottom, and left, then theheight and width of the element are determined by the placement ofthe sides. Assume that you want an element to fill the left half ofits containing block, from top to bottom. You could use these styles,with the result depicted in Figure 9-4:

replication in border-width. These are both illustrated in Figure 7-40.

H1 {border-style: none none dotted; border-bottom-width: thin;}
P {border-style: solid; border-width: 15px 2px 7px 4px;}
Figure 7-40

Figure 7-40. Value replication and uneven border widths No border at all

So far, we've only talked