Techniques for eliminating a documents' default margins

Home

Techniques for eliminating a document's default margins

All HTML document by default have a margin surrounding all four corners of it. As desirable as margins are in most cases, sometimes they with your design, such as a header bar that spans the entire page horizontally. In this tutorial I'll show you the two techniques most commonly used to remove the document's margins, so content presses right against the edge of the window.

Eliminating the document margin using CSS

Using CSS is the easiest way to remove the margins of your webpage:

<style type="text/css">
body{
margin: 0;
padding: 0
}
</style>

This will completely remove the margin from all corners of the page. If you wish to only remove the vertical (top bottom) or horizontal (left right) margins, use of the below CSS instead, respectively:

<style type="text/css">
body{ /*remove vertical margins*/
margin-top: 0;
margin-bottom: 0;
}
</style>

<style type="text/css">
body{ /*remove horizontal margins*/
margin-left: 0;
margin-right:: 0
}
</style>

Eliminating the document margin using legacy HTML attributes

The fact is, even before the advent of CSS, it was possible to remove the document margins by using certain HTML attributes inside the BODY tag. In case you are interested in them, they are:

The first four attributes remove the page's margins in IE, while the later two work for Firefox. Combined, they remove the page's margins across browsers.