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


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;}