CSS Attributes Index   Box Attributes

---

Sets or retrieves the width of the left and right margins and the height of the top and bottom margins for the object.

CSS	{ margin: [ length | percentage | 'auto' ] {1,4}}
Script	object.style.margin = [ length | percentage | 'auto' ]

length	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).
percentage	Value expressed as a percentage of the parent object’s height.
auto	Value set to be equal to the value of the opposite side.

The property is read/write with a default value of 0; this attribute is not inherited.

The margin property is a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left in a single declaration.

The {1,4} in the syntax above means that up to four values can be specified in this order: top, right, bottom, left.

If one width is supplied, it is used for all four sides. If two widths are supplied, the first is used for the top and bottom borders, and the second is used for left and right borders.

If three widths are supplied, they are used for top, right and left, and bottom borders, respectively. Negative margins are supported except for top and bottom margins on inline objects.

Margins are always transparent.

The width property must be set on a SPAN object for the margin properties to render.

Possible length values specified in a relative measurement using the height of the element’s font ( em ) or the height of the letter "x" ( ex ) are supported.

The following example demonstrates use of the shorthand margin attribute to change the margins around an element in relation to its immediate container object.

 Show me 

The sample below uses inline event handlers to dynamically set the margin property of an object in response to mouse events.

<img src="../shared/images/earth.gif"
   onmouseover="this.style.margin='5mm 5mm 5mm 5mm'"
   onmouseout="this.style.margin=''"
   width=110 height=110 border=0 alt="Mother">

 Show me 

padding, CSS Length Units