Book Home Friday 20th of October 2017 03:41:09 AM Cascading Style Sheets: The Definitive GuideSearch this book

Full Text Search

As stated earlier, it's possible to set percentage values for the padding of an element. Percentages are computed in relation to the width of the parent element, so they can change if the parent element's width changes in some way. For example, assume the following, which is illustrated in Figure 7-59:

P {padding: 10%; background-color: silver;}
<DIV STYLE="width: 200px;">
<P>This paragraph is contained within a DIV which has a width of 200 pixels,
so its padding will be 10% of the width of the paragraph's parent element.

If you are having difficulty searching, or if you have not used this search utility before, please read this.

Library Navigation Links

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


This color declaration sets the level of red to its maximum, blue to maximum, and green the same. These combine to create white, which is, after all, the combination of all colors. Alternatively, in order to specify black -- the absence of color -- all three would be set to 0%. Here are a few more color declarations:

H1 {color: rgb(0%,0%,0%);}          /*black*/
H2 {color: rgb(50%,50%,50%);}       /*medium gray*/
Figure 7-37

Figure 7-37. Margins, backgrounds, and borders

The border's width is, by default, medium , as we can see in Figure 7-37. We can change that to the result in Figure 7-38 as follows:

As we can see in Figure 7-41, despite the fact that the border's width was set to be 20px , when the style is set to none, not only does the border's style go away, so does its width! Why?

has spilled beyond the edges of the browser window and has not only pulled up far enough to overlap the end of the previous paragraph, but has also pulled the following paragraph up to overlap its last line.

Figure 7-19

Figure 7-19. Negative margin

Negative percentages are also permitted. These will behave like any negative length value, with the obvious difference that the amount of negativity will depend on the width of the parent element. Thus: