Before we get into creating layouts using DIV’s we should look at using a CSS Reset.
Browsers tend to display spacing differently – things like margins and padding, paragraph and heading line space before and after. One browser may have 4 pixels as a default while others have 6, making your layout shift around. Block elements have a default margin-top and margin-after which can mess with layouts at times.
So…. to make things easier for us, instead of trying to figure when and where things will be different and then trying to find a solution through more coding (which sometimes is inevitable), we set everything to zero. That way when we want any kind of spacing we simply create a CSS rule stating exactly what we want – which will still may be a bit inconsistent in different browsers/devices but at least it will be more consistent, more often with less work.
Basic CSS Reset
To start we are going to use an old but basic method.
In our CSS we will write a rule as such:
* { margin:0; padding:0;}
Simple!
The “*” is referred to as a universal selector which means – EVERYTHING!!
This rule sets the margin and padding of everything on our page to zero.
Complete Reset
One can be more specific by being explicit on what items should have a zero margin. While at it why not set borders to zero, outlines, and so on.
Eric Meyer is considered to be the guru on the CSS reset and has been kind enough to post a free download of his version of the CSS reset here: http://meyerweb.com/eric/tools/css/reset/
There are of course many different ways to apply a CSS Reset, a quick search in Google can dig up other options including views from others saying not to use a CSS Reset >>.