Body padding and margin

Date: 2 October 2003
Author: Russ Weakley

How do you force content to sit in the very top left corner of the browser window? In the old days we used to use invalid hacks like:

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Now, it is far more common to see developers using CSS based methods like:

body
{
	margin: 0;
	padding: 0;
}

But why do you need margin and padding? The reason is that browsers use different methods to set their default indentation on the body element.

If body { padding: 0; } is used, only Opera (both Mac and Windows) will set items into the top left corner of the window.

If body { margin: 0; } is used, all other standards compliant browsers (excluding Opera) will set items into the top left corner of the window.

The best way to set items into the top left corner of the window is to use body { margin: 0; padding: 0; } which will work for all standards compliant browsers.

Comments are closed.