How to Remove the White Border from Around a Website

April 20th, 2010 - Posted by Steve Marks to (X)HTML / CSS, Web Development.

Everyone remembers their first attempt at creating a website. For me, my first website was the most important. It taught me not only the very basics of creating simple HTML, but also taught me that I love to code and without it, I sure as Hell wouldn’t be doing what I do today.

If you’re currently in the process of creating your first website(s), you will no doubt at some point come across the issue that is; you have a white border running around the edge of your site and for the life you it won’t disappear. Don’t worry, this is a very simple fix and I’ll explain how to do so below.

You will probably know by now that a HTML file contains a section known as the ‘body’. Enclosed by an opening and closing tag (<body></body>) the body should contain all the content that is visible to the user. If you’re seeing a white border around the edge of your site it’s because this body section has a default margin around the outside of about 10 pixels.

OK, so now we know why we have this gap, how do we get rid of it? The answer is simple. Using CSS we need to remove this margin, or in other words, set it to zero pixels. A very simple example of this can be seen below:

<html>
<head>
    <style type="text/css">
        body { margin:0; }
    </style>
</head>
<body>
    Hello World!!!
</body>
</html>

If you try the above you will see that the ‘Hello World!!!’ text sits snug up against the top left corner. I know it took a while for me to first work this out it’s a valuable lesson that I now use in every single one of my websites.

Tags: , ,
This entry was posted on Tuesday, April 20th, 2010 at 10:14 pm by +Steve Marks and is filed under (X)HTML / CSS, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments (0)
Comments are closed.