Home arrow DHTML arrow Page 5 - Layouts, Margins, and Other Style Sheet Property References
DHTML

Layouts, Margins, and Other Style Sheet Property References


In this sixth part of our series on style sheet properties, you'll learn about layout properties, margins, and more. It is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 4 stars4 stars4 stars4 stars4 stars / 6
October 04, 2007
TABLE OF CONTENTS:
  1. · Layouts, Margins, and Other Style Sheet Property References
  2. · Layout-grid-line
  3. · Line-break
  4. · List-style-image
  5. · Margin

print this article
SEARCH DEVARTICLES

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.

blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials