CSS global whitespace reset

Certain elements on webpages, such as paragraphs, have a different default spacing (margin & padding) depending on the browser being used. For example, Firefox might have a default padding of 5 pixels between a container's borders and what's within that container while Internet Explorer will have no padding at all.

This inconsistency will make pages appear differently depending on the browser, but we can fix it with the CSS global whitespace reset.

The global whitespace reset:
* {margin: 0; padding: 0;}

Put the above line at the top of your CSS code and the margin and padding of ALL of the elements on the page will be 0. The * symbol simply means 'all'.

No borders

You can take it a step further and say that no elements should have a border either:

* {border: 0; margin: 0; padding: 0;}

Now, no elements on the page will have a margin, padding, or borders.

Spacing for particular elements

You may need to set spacing for particular elements such as paragraphs on the page. This should be done after the global whitespace reset.

* {margin: 0; padding: 0;} p {margin: 5px; padding: 10px;} table {margin: 6px; padding: 6px;}

In the above example, first we are saying that the spacing of all elements on the page should be 0, but then we set spacing for paragraphs and tables individually. While the spacing for other elements on the page remains at 0, paragraphs and tables will have their own spacing settings.

Landofcode.com space reset

We use the global whitespace reset on this website, but we have made a special page without it to put into perspective what a site would look like with the space reset and without it.

See Landofcode.com regular homepage (with global whitespace reset)

See Landofcode.com homepage without global whitespace reset

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information