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

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

Layouts, Margins, and Other Style Sheet Property References - Layout-grid-line
(Page 2 of 5 )


IE 5(Win) NN n/a Moz n/a Saf n/a Op n/a CSS n/a

Inherited: Yes

Controls the line height of Asian language character grid for block-level elements.

CSS Syntax

layout-grid-line: length | auto | none


Length value as an absolute unit measure, or a percentage. Or one of the following constants: auto | none.

Initial Value           none

Example                 body {layout-grid-mode: both; layout-grid-line: 14px} 

Applies To               All elements.

Object Model Reference


IE 5(Win) NN n/a Moz n/a Saf n/a Op n/a CSS n/a

Inherited: Yes

Controls whether the Asian language character grid should be one- or two-dimensional.

CSS Syntax

layout-grid-mode: gridMode


One of the following constants: both | char (for inline elements) | line (for block-level elements) | none.

Initial Value        both

Example                      body {layout-grid-mode: both} 

Applies To                  All elements.

Object Model Reference


IE 5(Win) NN n/a Moz n/a Saf n/a Op n/a CSS n/a

Inherited: Yes

Controls how the layout grid responds to characters of varying width.

CSS Syntax

layout-grid-type: gridType

Value                   One of the following constants: fixed | loose | strict .


Initial Value       fixe d

Example              div.kor {layout-grid-type: strict}

Applies To           Block-level elements .

Object Model Reference


IE 4 NN 4 Moz all Saf all Op all CSS 2

Inherited: No

For positionable elements, defines the offset position of the left margin edge of an element relative to the left edge of the next outermost block content container. When the element is relative-positioned, the offset is based on the left edge of the inline location of where the element would normally appear in the content.

CSS Syntax

left: length | percentage | auto


See the discussion about length values at the beginning of this chapter. Negative lengths may be allowed in some contexts, but be sure to test the results on all browsers. You may also specify a percentage value, which is calculated based on the width of the next outermost container. The setting of auto lets the browser determine the left offset of the element box within the containing box by virtue of normal element flow.

Initial Value          auto


h1 {position: relative; left: 2em}
#logo {position: absolute; left: 80px; top: 30px}

Applies To             Positioned elements.

Object Model Reference


IE 4 NN n/a Moz all Saf all Op all CSS 1

Inherited: Yes

Defines the spacing between characters within an element. Browsers normally define the character spacing based on font definitions and operating-system font rendering. To override the settings, assign a length value to the letter-spacing property. A negative value tightens the spacing, but test the effect on the selected font for readability on different operating systems.

CSS Syntax

letter-spacing: length | normal


See the discussion at the beginning of this chapter about length values. The best results use units that are based on the rendered font size (em and ex). A setting of normal is how the browser sets the letters without any intervention.

Initial Value           normal


.tight {letter-spacing: -0.03em}
blockquote {letter-spacing: 1.1em}

Applies To              All elements.

Object Model Reference


blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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