Home arrow DHTML arrow Page 3 - 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 - Line-break
(Page 3 of 5 )

 

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

Inherited: Yes

Controls line-breaking rules for Japanese text.

CSS Syntax

line-break: normal | strict

Value                 One of the following constants: normal | strict.

Initial Value       normal

Example             p {letter-break: strict}

Applies To          Block-level elements .

Object Model Reference

[window.]document.getElementById("elementID").style.lineBreak

line-height
IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: Yes

Sets the height of the inline box (the box holding one physical line of content). Under normal circumstances, the line-height of the tallest font in a line of text or the tallest object governs the line height for that content line.

CSS Syntax

line-height: normal | number | length | percentage

Value

A value of normal lets the browser calculate line spacing for the entire element, thus producing a computed value that can be inherited by nested elements. A number  value (greater than zero) acts as a multiplier for the font-size of the current element. Therefore, if a nested element inherits the line-height multiplier from its parent, that multiplier is applied to the current elementís font-size setting (the multiplier, not the computed value of the parent, is inherited). A length  value assigns an actual value to the inline box height. And a percentage  value is a multiplier applied to the font size of the current element. In this case, the computer value can be inherited by nested elements.

Initial Value       normal

Example

p {line-height: normal}    /* Browser default; actual value is inheritable */
p {line-height: 1.1}       /* Number value; the number value is inheritable */
p {line-height: 1.1em}     /* Length value; the actual value is inheritable */
p {line-height: 110%}      /* Percentage value; percentage times font size */
                          
/* is inheritable /*

Applies To                  All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.lineHeight

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

Inherited: Yes

This is a shorthand property for setting up to three list-style properties in one assignment statement. Whichever properties you donít explicitly set with this property assume their initial values. These properties define display characteristics for the markers automatically rendered for list items inside ol and ul elements.

CSS Syntax

list-style: list-style-type || list-style-position || list-style-image

Value

See the individual property entries for list-style-type, list-style-position, and list-style-image for details on acceptable values for each. You may include one, two, or all three values in the list- style property setting in any order you wish.

Initial Value          None.

Example                ul {list-style: square outside none}

Applies To

dd, dt, li, ol, and ul elements and any other element assigned the display: list-item style property.

 

Object Model Reference

[window.]document.getElementById("elementID").style.listStyle


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