Book Home Wednesday 28th of June 2017 07:12:51 AM Cascading Style Sheets: The Definitive GuideSearch this book

Full Text Search

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.

pale red color, then you would want to raise the other two values:

H1 {color: rgb(75%,50%,50%);}

The easiest way to visualize how these percentages correspond tocolor is to create a table of gray values. Besides, grayscaleprinting is all we can afford for this book, so that's whatwe'll have to do:

Figure 3-1 shows what the various percentage valueswill yield.

If both margins are set explicitly, and width isauto, then the value of widthwill be set to be whatever is needed to reach the required total(that is, the content width of the parent element). The followingmarkup is displayed as shown in Figure 8-13:

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

Figure 8-13. Automatic width

This is the most common case, in fact, since it is equivalent tosetting the margins and not declaring anything for the

However, all of this is true only for the top and bottom sides ofinline elements; the left and right sides are a different storyaltogether. We'll start by considering the simple case of asmall inline element within a single line, as depicted in Figure 7-22.

Figure 7-22

Figure 7-22. A single-line inline element with a left margin

Here, if we set values for the left or right margin, they will bevisible, as Figure 7-23 makes obvious:

left margin is set to auto, then the left margin will be 200 pixels wide:

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, "make up the difference between everything else and the required total." However, what if all three of these properties are set to 100px , and none of them to