HTML - Removing browser padding

ben2ong2 · October 03, 2006, 06:20:40 PM

Both Internet Explorer and Netscape Communicator introduce padding between their edges and contents. Padding is the blank space between the inside edge of the browser window and the actual web page contents. This padding can range from 10 to 12 pixels depending on the browser, platform and version. Here we'll look at a simple HTML trick to remove the padding around web page contents.

You would have noticed that this page however, has no such padding and the contents are placed flush against the edges.

You can remove the padding either by using frames or using specific attributes to BODY tag and style sheets. This web site employs the latter method.

To remove padding you include four attributes in the body tag as:

<BODY MARGINWIDTH="0" MARGINHEIGHT="0 LEFTMARGIN="0"
TOPMARGIN="0">
Netscape uses MARGINWIDTH and MARGINHEIGHT while Internet Explorer uses LEFTMARGIN and TOPMARGIN. Since we have set all these attributes to 0, the web page will be displayed without any padding.

Internet Explorer follows style sheets better than Netscape. Thus, we can do away with the I.E. specific attributes (LEFTMARGIN and TOPMARGIN) in the BODY tag by using the margin property in style sheets.

body {margin:0}
Note: we have set the margin property to 0 and assigned it to the body selector. This style is placed inside the HTML head between <STYLE> - </STYLE> tags or in an external .css file. Since I.E. recognizes this style, we no longer need LEFTMARGIN and TOPMARGIN and can remove them from the <BODY> tag.

The final document should look like:

<HTML>
<HEAD><TITLE>Some title</TITLE>
<STYLE>

body {margin:0}

<STYLE>
</HEAD>
<BODY MARGINWIDTH="0" MARGINHEIGHT="0">
...
Contents
...
</BODY>
</HTML>

Ryan's District Boards

News:

HTML - Removing browser padding

ben2ong2