Figure 8-7. Element boxes are as wide as the width of their parent element

Thus, if the width of the DIVis 30em , then the sum total of the content width,padding, borders, and margins of each paragraph will be30em. In Figure 8-7, the"blank" space around the paragraphs is actually theirmargins. (If the DIV had any padding, there would are assumed to have an intrinsic height and width; for example, an image will be a certain number of pixels high and wide. Given this, if either height or width are set to auto for a replaced element, then the value will always evaluate to the intrinsic height or width of the element. Thus, if an image is 150 pixels wide, and its width property is set to the value auto, then its width will evaluate to 150px , as shown in Figure 8-26:

Remember when we mentioned static-position much earlier in the chapter? Here's one example of how it works and how it can be very useful.

Another important point is that when an element is positioned, it establishes a containing block for its descendant elements. For example, we could absolutely position an element and then absolutely position one of its children, as shown in Figure 9-23.

Figure 9-23. Nested absolutely positioned elements

applied to the right and left side of each line. Also, you can see that if not for the margins, the line may have broken after "text" instead of after "boldfaced." This is the only real way in which margins affect

To understand why, let's go back to the paper-and-plastic analogy employed in the previous section. Think of an inline element as a strip of paper with marginal plastic surrounding it. Displaying the inline element on multiple lines is like cutting up the strip into smaller strips. However, no extra plastic is added to eachSMALL {font-size: 66%;}BIG {font-size: 200%;}<P>This paragraph has a line-height of 1.5 times its font-size. In addition,any elements within it <SMALL>such as this small element</SMALL> also haveline-heights 1.5 time their font-size... and that includes <BIG>this bigelement right here</BIG>. By using a scaling factor, line-heights scaleto match the font-size of any element.</P>

Figure 8-64. Using a scaling factor for line-height

In this example, the line-height for theSMALL element turns out to be