CSS Margins by pptfiles

VIEWS: 5 PAGES: 22

									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 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
Value Description NN IE

margin-top margin-right margin-bottom margin-left

Sets the properties for the 4.0 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
Value auto length % Description The browser sets a bottom margin Defines a fixed bottom margin Defines a bottom margin in % of the total height of the document NN 4.0 4.0 4.0 IE 4.0 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 auto length % Description The browser sets a left margin Defines a fixed left margin Defines a left margin in % of the total width of the document NN IE 4.0 3.0 4.0 3.0 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 auto length % Description The browser sets a right margin Defines a fixed right margin Defines a right margin in % of the total width of the document NN IE 4.0 3.0 4.0 3.0 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 auto
length %

Description The browser sets a top margin
Defines a fixed top margin Defines a top margin in % of the total height of the document

NN 4.0
4.0 4.0

IE 3.0
3.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


								
To top