Borders and margins using style sheets

This is a page looking at using borders and margins in stylesheets to control the way a page looks

You can control the way that various elements appear on a page by altering the margins (white space around an element). This paragraph has a 10 pixel border around it, but the previous paragraph doesn't. This is done by setting a class for this paragraph

You can set uneven margins around an element. The order of measurement is top right left bottom. You can easily remember this because you work round an object's margins clockwise

If you want the same border on the top and bottom, and a different value for both left and right you don't need to type in both values. Top and bottom can be shown with one measurement and left and right with another single measurement

This paragraph only has a margin on the left hand side. You can set single side margins for all four sides. The text will then have no margin on the other sides. This is one way of indenting text using the margin command.

Collapsing margins

Collapsing margins are useful with lists. If you set a margin for each list item on the top and bottom, there's danger that the top margin of one item will add to the bottom margin of the previous item and give you a bigger margin than you want. You want the top and bottom margins for the top and bottom of the list but you don't want the space between each one to total both measurements.

  1. Margins should collapse when this happens
  2. Lets test it in the browsers
  3. to see what happens
And what does happen? It doesn't very well in Netscape and the margins don't seem to collapse in IE or Opera!