CSS Margins

The Margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once.

Margin Property The margin property is a shorthand property for setting all of the properties for the four margins in one declaration. Note: Negative values are allowed. Inherited: No

Example h1 {margin: 10px} all four margins will be 10px h1 {margin: 10px 2%} top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. h1 {margin: 10px 2% -10px} top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px h1 {margin: 10px 2% -10px auto} 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

Possible Values ValueDescriptionNNIE margin-top margin-right margin-bottom margin-left Sets the properties for the margins. The values comes in % (defines a margin in % of the total height/width of the document), length (defines a fixed margin), and auto (the browser sets a margin). 4.0

Browser Notes Note in IE 4.0+: This property does not work with inline elements The "margin-bottom" property does not work with table cells Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work properly with inline elements, input fields, images, and list items This property ignores the bottom margin declaration entirely if a top margin has been specified

Margin-Bottom Property The margin-bottom property sets the bottom margin of an element. Note: Negative values are allowed. Inherited: No

Example h1 { margin-bottom: 10px } h2 { margin-bottom: -20px }

Possible Values ValueDescriptionNNIE autoThe browser sets a bottom margin4.0 lengthDefines a fixed bottom margin4.0 %Defines a bottom margin in % of the total height of the document 4.0

Browser Notes Note in IE 4.0+: This property does not work with table cells or inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work with inline elements, input fields, images, and list items This property ignores negative values

Margin-Left Property The margin-left property sets the left margin of an element. Note: Negative values are allowed. Inherited: No

Example h1 { margin-left: 10px } h2 { margin-left: -20px }

Possible Values ValueDescriptionNNIE autoThe browser sets a left margin lengthDefines a fixed left margin %Defines a left margin in % of the total width of the document

Browser Notes Note in IE 4.0+: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work properly with inline elements, images, and list items This property ignores negative values on table cells

Margin-Right Property The margin-right property sets the right margin of an element. Note: Negative values are allowed. Inherited: No

Example h1 { margin-right: 10px } h2 { margin-right: -20px }

Possible Values ValueDescriptionNNIE autoThe browser sets a right margin lengthDefines a fixed right margin %Defines a right margin in % of the total width of the document

Browser Notes Note in IE 4.0+: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work properly with inline elements, images, and list items This property ignores negative values on table cells

Margin-Top Property The margin-top property sets the top margin of an element. Note: Negative values are allowed. Inherited: No

Example h1 { margin-top: 10px } h2 { margin-top: -20px }

Possible Values ValueDescriptionNNIE autoThe browser sets a top margin lengthDefines a fixed top margin %Defines a top margin in % of the total height of the document

Browser Notes Note in IE 4.0+: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work with inline elements, images, and list items This property ignores negative values on inline elements, images, list items, and table cells