Приглашаем посетить
Татищев (tatischev.lit-info.ru)

Using Negative Margins

Previous Page
Table of Contents
Next Page

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:
Using Negative Margins black; margin-top: 30px; margin-right: 30px; margin-bottom: 30px; margin-left: 130px;
Using Negative Margins 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.

Using Negative Margins


QUANTUM LEAP: NEGATIVE MARGIN SOLUTIONS FOR DESIGNERS

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 chapters (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.


    Previous Page
    Table of Contents
    Next Page