Web | This Site

CSS Home
CSS Reference
Pseudo Classes & Elements
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# CSS - margin

## Description:

The margin property is a shorthand property which sets the width of the margins on all four sides of an element.

## Possible Values:

- length: Any length value.
- percentage: The margin's width is calculated with respect to the width of the element's containing block.
- auto: Sets the values for all four margins to be automatically calculated.

## Applies to:

All the HTML elements

## DOM Syntax:

object.style.margin="5px"

## Example:

Here is the example:

<p style="margin: 15px; border:1px solid black;"> all four margins will be 15px </p> <p style="margin:10px 2%; border:1px solid black;"> top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
</p>
<p style="margin: 10px 2% -10px; border:1px solid black;"> top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px </p>
<p style="margin: 10px 2% -10px auto; border:1px solid black;"> top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser
</p>

This will produce following result:

all four margins will be 10px top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px

top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser

To Become more comfortable - Do Online Practice

Advertisement

Online Image Processing

Indian Baby Names