by Dinesh Thakur

Unlike padding property, the margin property puts space outside the box, between the box and other neighboring elements or between the box and the browser window. The values that can be set for this property can be specified in terms of length, percentage or AUTO.

 

For example:

 

P{border-style : solid;

Margin : 10px;

}

 

On specifying, it will put a solid border around <p> element in your webpage such that amount of space between border's outer edge and any other element on any side of border is 10 pixels.

 

You can also set the margins for specific sides using MARGIN-TOP, MARGIN-RIGHT MARGIN-BOTTOM and MARGIN-LEFT properties. For examples:

 

P{border-style : solid;

MARGIN-TOP : 10px;

MARGIN-LEFT : 20px;

MARGIN-RIGHT : 15px;

}

 

Margin property is a shorthand property for MARGIN-TOP, MARGIN-RIGHT, MARGIN-BOTTOM and MARGIN-LEFT properties. You can set the margins for top, right. bottom and left sides in a single statement. The order in which these specified values will appear are margin values for top, right, bottom and left sides. For examples:

 

P{border-style : dotted;

Margin : 10px 0 0 30px;

}