CSS Margins. The Margin properties define the space around elements. It is possible to use negative...

CSS Margins

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 10pxh1 {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 -10pxh1 {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

Value Description NN IE

margin-topmargin-rightmargin-bottommargin-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 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

Value Description NN IE

auto The browser sets a bottom margin 4.0 4.0

length Defines a fixed bottom margin 4.0 4.0

% Defines a bottom margin in % of the total height of the document

4.0 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

Value Description NN IE

auto The browser sets a left margin 4.0 3.0

length Defines a fixed left margin 4.0 3.0

% Defines a left margin in % of the total width of the document

4.0 3.0

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

Value Description NN IE

auto The browser sets a right margin 4.0 3.0

length Defines a fixed right margin 4.0 3.0

% Defines a right margin in % of the total width of the document

4.0 3.0

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

Value Description NN IE

auto The browser sets a top margin 4.0 3.0

length Defines a fixed top margin 4.0 3.0

% Defines a top margin in % of the total height of the document

4.0 3.0

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