Monday 21st of April 2014 06:36:54 AM

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

7.3.8. Margins: Known Issues

As useful as margins are, a number of problems can arise with theiruse -- enough, in fact, that they warrant their own section,instead of just a small warning box.

The first is that Navigator4.x generally adds margin rules to its built-inmargins, instead of replacing the built-in values. For example,let's say you want to eliminate the space betweenH1 elements and paragraphs. Here's the

Library Navigation Links

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

This is a simple style sheet, as shown in Figure 6-19:

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;}BIG text itself. This has the same effect theimages did: it opens up the entire line of text enough to clearlydisplay the elements within it. In this case, the effect is due tothe increased line-height of the inline elementBIG, as opposed to the intrinsic size of an image,but the effect is largely the same.

The reasons why all of this happens are actually rather complex. Formore details, please refer to the discussion of the inline formattingmodel found in Chapter 8, "Visual Formatting".Then there isvertical-align: middle. Thisvalue is usually applied to images, since it causes the verticalmidpoint of the element to be aligned with the "middle"of the line. The middle of the line is defined to be the point whichis one-half ex above the baseline, where the valueof ex is derived from thefont-size of the parent element. An example isshown in Figure 4-37: