CSS Controlling white space with Box Model

In a CSS a box model is followed for every element. Visualise it as a imaginary Box with element surronded by optional padding, border, and margins (refer to image).

Define border

[adsenseyu2]
In CSS border can be defined by style, thickness and color. For details refer Chapter-6.

Syntax
selector { border-width border-style border-color ;}
Example
p {border:thin gray double;}

Define margin
The area ouside of broder is margin. Margin can defined independently for each side by property
margin-top
margin-bottom
margin-left
margin-right
These properties can be defined as absolute value (px (pixels), pt (points), pc (picas), mm (millimeters), cm (centimeters), in (inches), em), auto (browser controlled) or %.

Syntax
selector { margin-top: value; margin-bottom: value; margin-left: value; margin-right: value;}

Another simple method of defining margins is selector with property margin followed by value of margin-top, margin-right, margin-bottom, margin-left.

Syntax
selector { margin margin-top value; margin-right value; margin-bottom value; margin-left value;}

Examples

p.test { margin 10 px; 20 px; 30 px ; 40 px; }

p.test { margin-top:40px; margin-bottom:20px; margin-right:10px; margin-left:70px;}

Define padding
Area between border and element is padding. padding can defined almost in fashion similiar to margin i.e. independently for each side by property
padding-top
padding-bottom
padding-left
padding-right
This property can be defined as absolute value (px (pixels), pt (points), pc (picas), mm (millimeters), cm (centimeters), in (inches), em), auto (browser controlled) or %.

Syntax
selector { padding-top: value; padding-bottom: value; padding-left: value; padding-right: value;}

Syntax
selector { padding-top value; padding-right value; padding-bottom value; padding-left value;}

Examples

p.test { padding 10 px; 20 px; 30 px ; 40 px; }

p.test { padding-top:40px; padding-bottom:20px; padding-right:10px; padding-left:70px;}