Removing
the Margin
by
Kris
Gosser AKA Kristopher : 9 February 2005
Introduction
Those margin issues just never seem to go away, now
do they? There have been many recurring questions on the
forum on how to get rid of the margin in the body, or how to
make your Web site tight up to a corner. Well, in this
tutorial, I'm going to explain how you get rid of that
annoying margin, and then you'll be on your way!
The Problem
[ That little white-space between the
viewport and my red square is annoying! ]
That was a screen shot of the little space we have
between the edge of the screen and an element in your body.
Now how do we fix that?
It's a lot easier than you think. Let's take a look at
our code before the fix:
- <html>
- <head>
- <meta
http-equiv="Content-Type"
content="text/html;
charset=iso-8859-1">
- <title>Untitled
Document</title>
- <style
type="text/css">
- div#main
{
- background:
#FF3300;
- width:
400px;
- height:
400px;
- }
- </style>
- </head>
-
- <body>
- <div
id="main"></div>
- </body>
- </html>
Notice the div receiving the id "main." It's telling that
div to be 400 pixels wide, 400 pixels tall, and also to have
a red background.
The Fix
It's in between that tag called "style" that we are
going to place our fix. Are you ready? Here's the code:
- <html>
- <head>
- <meta
http-equiv="Content-Type"
content="text/html;
charset=iso-8859-1">
- <title>Untitled
Document</title>
- <style
type="text/css">
- div#main
{
- background:
#FF3300;
- width:
400px;
- height:
400px;
- }
-
- body
{
- margin:
0px;
- }
- </style>
- </head>
-
- <body>
- <div
id="main"></div>
- </body>
- </html>
And here's a screen shot of the updated page:
[ Ahhh... That's better! ]
It worked! Notice that I declared the body has a margin
of 0 (zero) pixels. This tells the browser that there
shouldn't be any space between structural elements and the
view screen.
Don't forget to visit our forums for more help. And feel
free to PM (private message) me, Kristopher, via the forums.
Have fun!
|
