Difference between revisions of "CSS GUIDE MARGIN"

From CDOT Wiki
Jump to: navigation, search
(See Also)
(See Also)
 
(12 intermediate revisions by the same user not shown)
Line 5: Line 5:
  
 
== Syntax ==
 
== Syntax ==
TARGET_ELEMENT {margin: 10px}
+
<pre>TARGET_ELEMENT {margin: 10px}</pre>
  
 
== Legal Values ==
 
== Legal Values ==
Line 19: Line 19:
  
 
== Usage Examples ==
 
== Usage Examples ==
 
+
<pre>
 
h1 {margin: 10px}
 
h1 {margin: 10px}
 
all four margins will be 10px
 
all four margins will be 10px
 
+
</pre>
 +
<pre>
 
h1 {margin: 10px 2%}
 
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.
+
top and bottom margin will be 10px, left and right margin will be 2% of the
 
+
total width of the document.
 +
</pre>
 +
<pre>
 
h1 {margin: 10px 2% -10px}
 
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
+
top margin will be 10px, left and right margin will be 2% of the total
 
+
width of the document, bottom margin will be -10px
 +
</pre>
 +
<pre>
 
h1 {margin: 10px 2% -10px auto}
 
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
+
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
 +
</pre>
  
 
== Notes ==
 
== Notes ==
 +
Negative values are allowed.
  
 
== Specification Conformance  ==
 
== Specification Conformance  ==
 +
[http://www.w3.org/TR/REC-CSS1#margin CSS1]<br />
 +
[http://www.w3.org/TR/REC-CSS2/box.html#margin-properties CSS2]<br />
 +
[http://www.w3.org/TR/CSS21/box.html#propdef-margin CSS3]
  
 
== Browser Compatibility ==
 
== Browser Compatibility ==
  
 
== See Also ==
 
== See Also ==
 +
[http://www.w3.org W3.org - Cascading Style Sheets ]<br />
 
[http://www.w3schools.com/css/pr_margin.asp W3Schools]
 
[http://www.w3schools.com/css/pr_margin.asp W3Schools]

Latest revision as of 13:19, 8 December 2006

Summary

The margin property is used for setting the four margins in one declaration.

Inherited: No

Syntax

TARGET_ELEMENT {margin: 10px}

Legal Values

Values can be specified as pixels (px) or percentage (%)


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).

Negative values are allowed.

Mozilla Recommended Values

Usage Examples

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

Notes

Negative values are allowed.

Specification Conformance

CSS1
CSS2
CSS3

Browser Compatibility

See Also

W3.org - Cascading Style Sheets
W3Schools