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





Spacer Bottom Left Corner ImageBottom Right Corner Image
Valid XHTML 1.0 Strict  Valid CSS! Check the accessibility of this site according to U.S. Section 508