element. "Blank space" generally refers to the area in which other elements cannot also exist and in which the parent element's background is visible. For example, look at Figure 7-5, which shows the difference between two paragraphs without any margins, and the same two paragraphs with some margins.

Figure 7-5

Figure 7-5. Paragraphs with, and without, margins

The simplest way to set a margin is by using the property margin.

Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 08th of February 2016 10:49:23 AM

9.6. Summary

When it comes right down to it, positioning is a very compelling technology. It's also likely to be an exercise in frustration if you're trying to get it to behave consistently in a cross-browser environment. The problem isn't so much that it won't work in some browsers: it's that it will only sort of work in a number of them, such as Navigator 4 and Internet Explorer 4 and 5. It can be great fun to play with positioning, and one day we'll be able to use it in place of tables and frames while dramatically improving accessibility and backward compatibility. As of this writing, though, it remains a great way to create design prototypes, but a tricky thing to use on a public web site.

As it happens, this sentiment may be applied to the majority of CSS2, which is given an overview in the next chapter.



Library Navigation Links

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

an element can induce an offset for child elements. Vertical marginsare still collapsed, as shown in Figure 8-18:

DIV {margin: 20px; padding: 20px;}P {margin: 10px; padding: 10px;}
Figure 8-18

Figure 8-18. Offset is implicit in the parent's margins and padding

8.2.2.4. Negative margins

So far, this probably all seems ratherBODY {background: white url(yinyang.gif) top left repeat-y fixed;}BODY {background: fixed url(yinyang.gif) white top left repeat-y;}BODY {background: url(yinyang.gif) white repeat-y fixed top left;}

Figure 6-58

Figure 6-58. Using shorthand

Actually, there is one slight restriction to how the values areordered in background , which is that if you havetwo values for background-position , they mustappear together, horizontal first, then vertical. That probablyisn't a surprise, but it is important to remember.

8.2.2.2. Using auto

If only one of width , margin-left, or margin-right is set to a value of auto, while the others are given specific values, then the property set to be auto will evaluate to whatever length is required to make the element box's width equal the parent element's width. Thus, if the sum of the seven properties

H1 {margin: 0.5em 10% 0.5em 10%;}
Figure 7-12

Figure 7-12. Mixed margins

Here, although the top and bottom margins will stay constant in any situation, the side margins will change based on the width of the browser window. This of course assumes that all H1 elements are the child of the BODY element and that BODY is as wide as the browser window. More properly stated, the side margins of H1 elements will be 10% of the width of the H1's parent element.