by Dinesh Thakur Category: Cascading Style Sheets (CSS)

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;

}


About Dinesh Thakur

Dinesh ThakurDinesh Thakur holds an B.SC (Computer Science), MCSE, MCDBA, CCNA, CCNP, A+, SCJP certifications. Dinesh authors the hugely popular blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps. For any type of query or something that you think is missing, please feel free to Contact us.