Layouts, Margins, and Other Style Sheet Property References - Margin
(Page 5 of 5 )
margin
IE 4 NN 4 Moz all Saf all Op all CSS 1
Inherited: No
This is a shortcut property that can set the margin widths of up to four edges of an element with one statement. A margin is space that extends beyond the border of an element to provide extra empty space between adjacent or nested elements, especially those that have border properties set. You may supply one to four space-delimited margin values. The number of values determines which sides receive the assigned margins.
CSS Syntax
margin: marginThickness | auto {1,4}
Value
This property accepts one, two, three, or four values, depending on how many and which margins you want to set. Values for marginThickness can be lengths , percentages of the next outermost element size, or the auto constant. Value quantities and positions are
interpreted as follows.
| Number of values | Effect |
| 1 | All four margin edges set to value |
| 2 | Top and bottom margins set to the first value, right and left margins set to the second value |
| 3 | Top margin set to first value, right and left margins set to second value, bottom margin set to third value. |
| 4 | Top, right, bottom, and left margin set, respectively |
Initial Value 0
Example p.highlight {margin: 10px 20px}
margin-bottom, margin-left, margin-right, margin top
Applies To All elements.
Object Model Reference
[window.]document.getElementById("elementID").style.margin
margin-bottom, margin-left, margin-right, margin-top IE 4 NN 4 Moz all Saf all Op all CSS 1
Inherited: No
All four properties set the width of a single margin edge of an element. A margin is space that extends beyond the element’s border and is not calculated as part of the element’s width or height.
CSS Syntax
margin-bottom: marginThickness | auto margin-left: marginThickness | auto
margin-right: marginThickness | auto
margin-top: marginThickness | auto
Value
Values for marginThickness can be lengths , percentages of the next outermost element size, or the auto constant.
Initial Value 0
Example
blockquote {margin-left: 20; margin-top: 10} #narrowCol {margin-left: 30%; margin-right: 30%}
Applies To All elements.
Object Model Reference
[window.]document.getElementById("elementID").style.marginBottom
[window.]document.getElementById("elementID").style.marginLeft
[window.]document.getElementById("elementID").style.marginRight
[window.]document.getElementById("elementID").style.marginTop
marker-offset
IE n/a NN n/a Moz n/a Saf n/a Op n/a CSS <2.1
Inherited: No
Controls the space between list item markers (which occupy their own box in the CSS box model) and the box that contains the list item text. Requires that the list item elements be set to a display style marker .
CSS Syntax
marker-offset: length | auto
Value
A length value (see the discussion of length values at the beginning of this chapter), or the auto constant.
Initial Value auto
Example li:before {display: marker; marker-offset: 4em}
Applies To
List elements set to marker display mode (generally with a :before or :after pseudo-class).
Please check back next week for the continuation of this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
 This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Check it out today at your favorite bookstore. Buy this book now.
|
|
