Tutorials
Books
Videos
Forums
This is an archived tutorial from the kirupa.com legacy collection. It covers software that may no longer be available, but it is kept online because the ideas still hold up.
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!
[ 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.
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!
|
Kris
Gosser www.krisgosser.com |
Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.
Your support keeps this site going! 😇
:: Copyright KIRUPA 2026 //--