Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 13th of December 2017 08:04:39 PM

7.2. Margins or Padding?

There are three ways to generate extra space around elements. The first is to add only padding to an element; second, to add only margins; and third, to add a combination of padding and margins. Under certain circumstances, it doesn't really matter which you pick. If an element has a background, however, then it does matter which of the three options you choose. That's because the background will extend into the padding, but not the margin. Thus, the amount of padding and margin you assign to a given element will influence where the background of the element will end.

If you set background colors for the elements involved, as illustrated in Figure 7-4, the difference becomes a little more clear. The elements with padding have extra background, as it were, whereas those with margins do not.

Figure 7-4

Figure 7-4. Paragraphs with different margins and padding, with backgrounds to illustrate the differences

In the end, deciding how to set margins and padding is up to the designer, who has to balance the various possibilities against the intended effect and pick the best alternative. In order to be able to make these choices, of course, it helps to know what properties can be used.

of green, and on and on.

Of course, this means that when you're designing a page, youneed to put some thought into it first. That's generally truein any case, but with colors, it's even more so. For example,if you're going to set all hyperlinks to be yellow, will thatclash with the background color in any part of your document? If youuse too many colors, will the user be too overwhelmed? If you changethe default hyperlink colors, will users still be able to figure outwhere your links are? If you set both regular text and hyperlink text Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

altogether so that it doesn't have any effect on documentlayout. Figure 9-14 shows a document in which anEM element has been set to behidden, based on the following styles and markup:

EM.trans {visibility: hidden; border: 3px solid gray; background: silver;padding: 1em;}<P>This is a paragraph which should be visible. Lorem ipsum, dolor sit amet,<EM CLASS="trans">consectetuer adipiscing elit, sed diam nonummy nibh </EM>
styles it contains to render the HTML document, in the manner shown
in Figure 1-2.

And what is the format of an external style sheet? It's simply a list of rules, just like those we saw in the previous section and in the example above, but in this case, the rules are saved into their own file. Just remember that no HTML or any other markup language can be included in the style sheet -- only style rules. Here's the markup of an external style sheet:

carry the color to all descendants ofDIV. However, there is a very real difference: therule shown would match every DIV descendant, andtherefore override the inheritance mechanism. Thus, even anchors(which are descendants of a DIV) would be madepurple under the given rule, whereas simple inheritance would not besufficient to make them purple.

While you can use the universal selector in combination withclass and ID selectors, there isn't much