Setting the Margins around an Element

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.

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

To set an element's margins:

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.

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


  • 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. 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. The 110 px margin to the left of the main content will give us room for the photo later.

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

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows