Chapter 26. Controlling Design Space with CSS

As you saw in Topic 25, HTML provides a few body-tag attributes to control the default amount of whitespace in the browser window, but these attributes are proprietarythey only work in certain browsers. Browsers that don't understand the attributes ignore them completely.

You get better margin control with Cascading Style Sheets (CSS). Just define a style for the body tag of the page, like this:

 <body style="margin: 0px;">

TIP

Ironically, you want to watch your use of CSS margin control when your page features CSS layouts. Getting fancy with margin spacing can throw off the positions of your divs. You may need to adjust their position values (left, top, right, and bottom) after you set the margins.

This line of code sets all four marginstop, left, right, and bottomto 0 pixels, thereby eliminating any default whitespace on the page.

CSS doesn't stop there. You can easily define different amounts of whitespace for the different margins with the margin-top, margin-left, margin-right, and margin-bottom attributes. The layout in Figure 26.1 has a top margin of 200 pixels, a left margin of 300 pixels, a right margin of 400 pixels, and a bottom margin of 100 pixels.

Listing 26.1. View Source for Figure 26.1.

[View full width]

 <body style="margin-top: 200px; margin-left: 300px; margin-right: 400px; margin-bottom :100px;">

Figure 26.1. This page uses CSS to control the amount of whitespace on all four margins.

TIP

As a shortcut, you can give the size of all four margins in the margin attribute, going in clockwise order (top, right, bottom, and left), like this:

<body style="margin: 200 400 100 300px;">