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.
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:
style="margin-top:0"
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.
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 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;}
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:
body {margin-top: 0.5em !important;}
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.
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.
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 plus 4 em 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); --></style>
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.
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; }