HTML and CSS —

Using Negative Margins

You can also use negative values with margins. This practice is helpful to achieve certain design needs, but it should be used with relative caution because browsers handle negative margins inconsistently.

Typically, negative margins are used to make visual adjustments, to manage workarounds for centering liquid designs in layout, or to offset specific elements outside the box in which they are contained (see Example 11-3).

Example 11-3. Using negative margins to override a containing element
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: white; background-color:
 black; margin-top: 30px; margin-right: 30px; margin-bottom: 30px; margin-left: 130px;
 border: 2px solid white;}
p {margin-left: -65px; margin-top: 5px; margin-bottom: 0;}

Now the paragraph margins are offset to the body's left margin (see Figure 11-5).

Figure 11-5. Using negative margins to override a containing blockin this case, the body element.

Negative margins

If you're interested in using negative margins to solve some known design issues, there are some terrific articles on the Web to help you out. "Creating Liquid Layouts with Negative Margins," by Ryan Brill, is terrificread it now or hold off 'til you read the next two tutorials (see http://www.alistapart.com/articles/negativemargins/). You can center elements using negative margins, too, as described by Rob Chandanais at http://www.bluerobot.com/web/css/center2.html. As with so many issues in CSS, the way browsers implement a property differs. Negative margins fall into this category because they are interpreted differently by different browsers. So use with careand, as a good rule of thumb, if there's an easier way to accomplish the end result, use it.