Using Margins

Style sheet margins enable you to add empty space around the outside of the rectangular area for an element on a web page. It is important to remember that the margin property works with space outside of the element.

Following are the style properties for setting margins:

• margin-top—Sets the top margin

• margin-right—Sets the right margin

• margin-bottom—Sets the bottom margin

• margin-left—Sets the left margin

• margin—Sets the top, right, bottom, and left margins as a single property

You can specify margins using any of the individual margin properties or using the single margin property. Margins can be specified as auto, meaning the browser itself sets the margin in specific lengths (pixels, points, ems) or in percentages. If you decide to set a margin as a percentage, keep in mind that the percentage is calculated based on the size of the entire page, not the size of the element. So, if you set the margin-left property to 25%, the left margin of the element will end up being 25% of the width of the entire page.