Added: 19 February, 2008
Group: CSS
Resetting default padding and margins with CSS
Author: Alex
page: 1

Resetting default padding and margins with CSS

Common problem in designing web pages with CSS is correct positioning of elements and aligning everything to fit well in all modern web browsers.


n this tutorial I will try to explain my methods in solving those issues.

Fist, it is essential to set all margins and padding on 0px because Firefox, Opera and Internet Explorer doesn't have same values for default positions. Therefore I set everything with:

html,body,li,ul,img,form,h1,h2,h3,h4,h5,h6,hr{
margin:0px;
padding:0px;
}


This little rule removes all the padding and margins from every element in your page and even that it can be drastic move for someone it is useful for two reasons: easier debugging and cross browser compatibility.

Second useful hack that should be used for formatting web pages with css and aligning content boxes without using table HTML element. Instead of

<table width="700" align="center">


This simple css style will do the same and create content box, 700 px wide, aligned at the center of the page that can be used as base element for setting other webpage elements.

.content{
position:relative;
width:700px;
background: #ccc;
margin-left: auto;
margin-right: auto;
}


GO to: Page 1 : Resetting default padding and margins with CSS


TechTut.com This tutorial is copyrighted. Partial duplication or full duplication is prohibited and illegal. Translation or usage of any kind without author�s permission is illegal.