Many web coders like to get rid of that annoying whitespace around the content and set their pages to the top left using position: absolute; top: 0; left: 0;,
but I have good news: There is a better way! By using a little "trick of the trade" (this is not a hack), you can easily set your content to the top left of
the page without having to go through the hassles of the position attribute.
By now, you should know how to set up your basic CSS. If not, view the CSS Basics article. I will be using internal CSS references
in this example, to keep everything together instead of having to manage with different files. Now, let's get started. By starting your CSS off with two basic
identifiers (not ID's or classes, that's covered in another article), the body and html tags, you can easily set all attributes
to the overall page itself. Why both? In simple terms, this covers all of the bases. IE, Firefox, Safari, etc. No matter which tag they prefer, this will cover both.
Now, what do margin and padding cover, and why set them to 0? The primary reason for setting the margin and
padding to 0 is to take away all of the leftover whitespace that surrounds the page itself. You are basically taking away the "bubble wrap" that protects
the page from hitting the corners. The margin is important because that deals with the area around the outside of the page (outside the perimeter), and the padding
is the area on the inside of the page, basically on the inside of the perimeter.
<html>
<head>
<title>CSS Basics Test</title>
<style type='text/css'>
body, html{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Side Notes:
body and html?
position: absolute; top: 0; left: 0;, but I like this way better). Also, while Firefox and Safari like the body element, IE likes the html (so both are included to satisfy all environments). px after the 0?
0px is equal to 0em and 0pt. Basically, 0 = 0, so there is no reason to put an extra measurement in the code. Plus, this can decrease the overall size of your HTML/CSS file (depending on which format you go), which can make the page load faster, even if by mere nanoseconds.