Home arrow DHTML arrow Padding, Pages, and More Style Sheet Properties
DHTML

Padding, Pages, and More Style Sheet Properties


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.

Author Info:
By: O'Reilly Media
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
October 18, 2007
TABLE OF CONTENTS:
  1. · Padding, Pages, and More Style Sheet Properties
  2. · Page
  3. · Page-break-inside
  4. · Pitch-range
  5. · Quotes

print this article
SEARCH DEVARTICLES

Padding, Pages, and More Style Sheet Properties
(Page 1 of 5 )

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

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