Setting the Margins around an Element

The margin is the amount of transparent space between one element and the next, in addition to and outside of any padding (see page 177) or border (see page 184) around the element.

Type margin: x, where x is the amount of desired space to be added, expressed as a length, a percentage of the width of the parent element, or auto.

Tips

If you use one value for margin, that value is applied to all four sides equally. If you use two values, the first value applies to the top and bottom and the second value applies to the right and left. If you use three values, the first applies to the top, the second to the right and left, and the third to the bottom. If you use four values, they are applied to the top, right, bottom, and left, in clockwise order.

Figure 11.18. The sidebar div will have a left margin of 74%, which will overlap the space for the main content just enough to allow for some padding around the sidebar text.
You can also add one of the following suffixes to the margin property to apply a margin to a single side: -top, -bottom, -left, or -right. There shouldn't be any space after margin (e.g., margin-top: 10px).

Figure 11.19. The 110 px margin to the left of the main content will give us room for the photo later.

[View full size image]
The margin property's auto value depends on the value of the width property (see page 174).
If one element is placed above another, only the greater of the two touching margins is used. The other one is said to collapse. Left and right margins don't collapse.
Margins are not inherited.

Setting the Margins around an Element

Figure 11.16. One of the principal margin adjustments is to the wrap div. When you set two values, the first is applied to the top and bottom margins, the second is applied to the left and right margins.We'll set the top and bottom margins to 20px to give our design a little space.

Figure 11.17. The `auto` margin setting centers the layout in the window by dividing up the leftover 10% of the browser window width that is not used by the wrap div between the right and left margins.

Figure 11.18. The sidebar div will have a left margin of 74%, which will overlap the space for the main content just enough to allow for some padding around the sidebar text.

Figure 11.19. The 110 px margin to the left of the main content will give us room for the photo later.

Setting the Margins around an Element

Figure 11.16. One of the principal margin adjustments is to the wrap div. When you set two values, the first is applied to the top and bottom margins, the second is applied to the left and right margins.We'll set the top and bottom margins to 20px to give our design a little space.

Figure 11.17. The auto margin setting centers the layout in the window by dividing up the leftover 10% of the browser window width that is not used by the wrap div between the right and left margins.

Figure 11.18. The sidebar div will have a left margin of 74%, which will overlap the space for the main content just enough to allow for some padding around the sidebar text.

Figure 11.19. The 110 px margin to the left of the main content will give us room for the photo later.

Figure 11.17. The `auto` margin setting centers the layout in the window by dividing up the leftover 10% of the browser window width that is not used by the wrap div between the right and left margins.