Padding, Pages, and More Style Sheet Properties

(Page 1 of 5 )

Continuing our series of articles on style sheet properties, this eighth part covers pages, pitch-range, 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.

Alphabetical Style Sheet Properties: Overflow-x, overflow-y 

overflow-x, overflow-y
IE 5(Win) NN n/a Moz 1.8 Saf 1.2 Op all CSS n/a

Inherited: No

Defines how the element treats content with rendered dimensions that exceed the specified width (x) or height (y) of the container. The operation of this property is the same as the regular overflow property, but each one operates along a single axis. This is particularly helpful if you want to have only a vertical or only a horizontal scrollbar appear with an element. See the overflow property discussion.

CSS Syntax

overflow-x: overFlowType
overflow-y: overFlowType

Value

Any of the following constants: auto | hidden | scroll | visible.

Initial Value         visible

Example                  body {overflow-x: hidden; overflow-y: scroll}

Applies To               Block-level, replaced, and positioned elements.

Object Model Reference

[window.]document.getElementById("elementID").style.overflowX
[window.]document.getElementById("elementID").style.overflowY

padding
IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: No

This is a shortcut property that can set the padding widths of up to four edges of an element with one statement. Padding is space that extends around the content box of an element up to but not including any border that may be specified for the element. Padding picks up the background image or color of its element. As you add padding to an element, you increase the size of the visible rectangle of the element without affecting the content block size. You may supply one to four space-delimited padding values. The number of values determines which sides receive the assigned padding.

padding-bottom, padding-left, padding-right, padding-top

CSS Syntax

padding: paddingThickness {1,4}

Value

This property accepts one, two, three, or four values, depending on how many and which sides you want to assign padding to. Values for paddingThickness  can be lengths  or percentages of the next outermost element size. Value quantities and positions are interpreted as follows.

Number of values	Effect
1	All four padding edges set to value
2	Top and bottom padding set to the first value, right and left padding set to the second value
3	Top padding set to first value, right and left padding set to second value, bottom padding set to third value
4	Top, right, bottom, and left padding set, respectively

Initial Value         0; IE for Windows specifies a default value of 1 for td and th elements.

Example        p.highlight {padding: 10px 20px}

Applies To

All elements (IE 5 for Macintosh, IE 5.5 for Windows, and W3C browsers); body , caption , div , iframe , marquee , table , td , textarea , tr , and elements (IE 5 and earlier for Windows). CSS2.1 deletes support for tr , thead , tbody , tfoot , col , and colgroup elements.

Object Model Reference

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

padding-bottom, padding-left, padding-right, padding-top
IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: No

All four properties set the padding width of a single side of an element. Padding is space that extends around the content box of an element up to but not including any border that may be specified for the element. Padding picks up the background image or color of its element. As you add padding to an element, you increase the size of the visible rectangle of the element without affecting the content block size.

CSS Syntax

padding-bottom: paddingThickness
padding-left: paddingThickness
padding-right: paddingThickness
padding-top: paddingThickness

Value

Values for paddingThickness  can be lengths  or percentages of the next outermost container size.

Initial Value      0 ; IE for Windows specifies a default value of 1 for td and th elements.

Example

blockquote {padding-left: 20; padding-top: 10}
#narrowCol {padding-left: 30%; padding-right: 30%}

Applies To

All elements (IE 5 for Macintosh, IE 5.5 for Windows, and W3C browsers); body, caption, div, iframe, marquee, table , td , textarea , tr , and elements (IE 5 and earlier for Windows). CSS2.1 deletes support for tr , thead , tbody , tfoot , col , and colgroup elements.

Object Model Reference

[window.]document.getElementById("elementID").style.paddingBottom
[window.]document.getElementById("elementID").style.paddingLeft
[window.]document.getElementById("elementID").style.paddingRight
[window.]document.getElementById("elementID").style.paddingTop

Next: Page >>
 

More DHTML Articles
More By O'Reilly Media

Comments On: Padding, Pages, and More Style Sheet Properties

· This article is an excerpt from the book "Dynamic HTML: The Definitive Reference,...   >>> Post your comment now!

Buy this book...

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.