IT and communication - Web:

Marginal issues in Web page design

Can you set Web page margins to zero, or to some other specific values? Not absolutely, but there is a combined way (HTML and style sheets) which works in most browsing situations. Here's a quick recipe for zero margins:
<body marginheight="0" topmargin="0" vspace="0"
marginwidth="0" leftmargin="0" hspace="0" style="margin:0; padding:0">

Generally, Web browsers leave some space between the document presentation and the borders of the canvas. For different versions of IE and Netscape, figures ranging from 8 to 16 pixels have been reported. For text in particular this is important, because it is difficult to read text which "hits" a border. Margins are part of normal style and shouldn't be touched by authors, unless there is a very good reason. Just disliking the defaults of one's own browser is not a good reason at all; fix your browser settings, and let others handle theirs as they like.

Top margin (and bottom margin)

Let's assume first that you wish to remove the top margin, for example because at the very beginning of the page you have a logo image and it is unnecessary (and somewhat unesthetic) to have a margin between it and the top of the canvas. You can use the following attributes in the body tag; they are different proprietary ways to do the same thing, so combining them gives the best browser coverage:

marginheight="0" topmargin="0" vspace="0"

Additionally use a style sheet for the same purpose, e.g. by just adding the following attribute into the body tag:


The proprietary attributes also set the bottom margin to zero. Thus, the first two of the attribute names are misleading. The style sheet on the other hand sets only the top margin; you would use

style="margin-top:0; margin-bottom:0"

if you want to remove bottom margin too.

Left and right margin

Similarly for setting the left and right margin to zero, you would use the following attributes in the body tag;

marginwidth="0" leftmargin="0" hspace="0" style=
"margin-left:0; margin-right:0"

This might make sense if e.g. the entire page is a table which inevitably consumes a lot of horizontal space and you wish to make use of the last pixels. You can't gain very much though.

The potential padding effect

The spacing between document body content and the canvas area borders is affected by both margin and padding properties. The suggested default CSS2 stylesheet for HTML 4 uses body {padding: 8px;} which Opera in fact has implemented. So to get rid of this, the stylesheet should also set the padding property to zero, e.g.
body {padding: 0; margin: 0;}

Do these methods work?

The methods described are effective in the great majority of browsing situations, but they are not guaranteed to work. The attributes except style are proprietary and can be ignored by browsers, and style sheets can be ignored or overridden. The methods would fail (though just in the sense that browsers use their default margins) e.g. in the following situations:

Moreover, on Netscape 4, when a vertical scroll bar is not needed (i.e. the entire document fits into the browser window, or requires horizontal scrolling only), there is still some room reserved for the scroll bar on the right. That looks pretty much like right margin, but since it's not margin but scroll bar area from Netscape's perspective, there doesn't seem to be a way to remove it. It may happen that when the page is refreshed, the area vanishes. Moreover, IE puts a real (though disabled) scroll bar there.

Note that although authors may have esthetic preference for absence of margins in some cases, users may have just the opposite preference. Just as someone thinks that margin between a window border and image is ugly, someone else thinks that an image "hitting" the window border is ugly.

If a page starts with a table, which is rather common when an author tries to exercise control over layout, there are additional problems. The details of table presentation are browser-specific, and for some odd reason Netscape wants you to use
<table ... cellspacing="0" cellpadding="0" border="0">
if you want to position a table to touch the left and upper border of the canvas. And this is turn may cause some problems inside the table, since the spacing and the padding have effects there as well. - Strictly speaking, this does not relate to page margins, since it's a matter of spacing related to tables; but this is a useful reminder of the fact that various elements may have margins, paddings and borders of their own, which may look like page margins.

Frames and margins

When frames are used, browsers generally don't use margins around the frames in the frameset. But inside each frame, margins might used, so the discussion here applies to the documents displayed in frames. Note that any settings must be done individually in each "framed" document. Settings in the frameset document have no effect on margins inside frames.

Interestingly, Netscape leaves a very small default margin when a document is displayed inside a frame. The considerations presented here apply then; specifically, the marginheight and marginwidth attributes would reduce the margins to zero on Netscape 4.

Setting nonzero margins

The methods discussed above can be used to suggest nonzero margins too, perhaps an increased margin. There are however some complications.

The presentational HTML attributes take values in pixels. In a style sheet, there is more flexibility; see the descriptions of the margin properties. In particular, you can use the amazing em unit, which causes the margin to be scaled according to the font size in use. (Naturally, text in very large font should have larger margins than tiny text.)

There is an annoying bug in Netscape's style sheet support: Netscape 4 tends to apply margin properties in CSS in addition to the margins set otherwise, either by its defaults or by presentational HTML attributes. So if we did the obvious thing and just modified the body attributes to, say,

<body marginwidth="50" leftmargin="50" hspace="50"
style="margin-left:4em; margin-right:2em">

then Netscape would, when CSS support is enabled, use a left margin of 50 pixels plusem units! The way to circumvent this bug is to use "Todd's trick": write the style sheet rule

body { margin-left:4em; margin-right:2em; }

to a separate file, say margins.css, and, instead of the style attribute in the body tag, include the following element into the head part of the document:

<style type="text/css"><!--
@import url(margins.css);

This indirection causes no problems to IE 4 or Opera but Netscape ignores it. That is, we use a known browser deficiency to circumvent the nasty effect of another deficiency. Naturally we hope that they won't fix the first one before the second one!

The following is just an illustration, suggesting a left margin of 4 em units or 50 pixels and a right margin of 2 em units. Browsers with style sheet support enabled should use the em suggestions, since style sheet declarations are expected to override presentational HTML markup. Note that 4 em units is not the same as 50 pixels (except sometimes by coindidence); this is just an illustration.

<body marginwidth="50" leftmargin="50" hspace="50"
style="margin-left:4em; margin-right:2em">

Note that on a browser supporting one of the proprietary attributes but not style sheets, the right margin will be 50 pixels, since those attributes don't let you specify left and right margin separately.

You may have noticed that this document actually comes up with margin suggestions as described above, for illustration. This does not mean that the author would regard such settings as generally useful.

One might use CSS positioning to defeat the Netscape bug discussed above. It seems that using
body {margin:0; padding:0; position: absolute; top:0; left:0}
makes Netscape use zero margins even if the Netscape-specific attributes to body in HTML are not used. Moreover, similar technique, with a nonzero value for the margin property, seems to let us suggest margins in a manner that circumvents the bug.

The scrollbar on the right

Irrespectively of the margins, browsers usually put a vertical scrollbar area on the right. On some browsers, such as IE 6 in "standards mode", this can be prevented by using the following CSS rule:

html { overflow: auto; }