CSS Margins. The Margin properties define the space around elements. It is possible to use negative...
-
Upload
edgar-powell -
Category
Documents
-
view
213 -
download
0
Transcript of 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