HTML and CSS [Electronic resources] نسخه متنی

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).