SiteBilder Website Tutorials ~ Advanced HTML Document Margins

Home > Advanced > Document Margins

Compatibility: IE 3.0+ NS 4.0+

Browser windows have always had a default margin around them. Margins were origionally 'built in' to HTML documents for aesthetic appeal, and they keep a web page from looking too crowded. But have you ever wanted to butt a graphic or table right up against the top or left side of your window? Many HTML authors don't believe this is possible, but with certain browser versions it can be done.

For instance, Internet Explorer 3.0 and above supports the topmargin and leftmargin attributes. These go into the body tag like so:

Netscape 4.0 and above have the marginwidth and the marginheight attributes. They also go into the body tag like this:

So, how do we get around the obvious incompatibilies of the two versions? Not a problem in this case. Just put both routines into your body tag. IE will ignore the NS attributes, and vice-versa.

Click the button to see an example of how the logo is displayed right up against the left and top side of the window.

You can also set left and right margins just about anywhere you want to in your document using the DIV tag and CSS. This particular paragraph is set to have margins of 100 pixels each. Here is the code:

Some web authors use cellpadding in a table to format their margins, but the Style solution is much better in my opinion. The table method also pads the top and bottom of your text, which is usually undesirable. The above method, however, only applies the 'padding' to the left or right margins, and the DIV tags can be nested in your document to provide a little variety in long passages of text. Happy formatting!

[Printer Friendly Page]

HOSTING: