How do I remove the extra spacing from the edges of a web page?
Author: Deron Eriksson
Description: This CSS example shows how to remove the extra spacing from around the edges of a web page.
Tutorial created using: Windows XP


When laying out a page using CSSW (typically using div elements), you may notice that, by default, spacing exists along the edges of the web page. The style-test-1.html page has the body element background-color set to yellow, and a single div element with background-color set to lime. By "spacing", I refer to the yellow area along the web page edges.

style-test-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test 1</title>
<style type="text/css">
body { background-color: yellow; }
#content { background-color: lime; }
</style>
</head>
<body>
<div id="content">
abc
</div>
</body>
</html>

The style-test-1.html page is shown here in IE7.

edges with spacing example

This spacing exists because of the default margin of the body element. Because of this, we can remove the spacing by setting the margin of the body element to 0. This is done in the style-test-2.html page.

style-test-2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test 2</title>
<style type="text/css">
body { background-color: yellow; margin: 0; }
#content { background-color: lime; }
</style>
</head>
<body>
<div id="content">
abc
</div>
</body>
</html>

In the display of style-test-2.html in IE7, we can see that the margin spacing has been removed.

edges with no spacing example