Box Model Properties


Each page element in the document tree is contained within a rectangular box and laid out according to a visual formatting model. The following elements affect an element's box.

border

Usage

A shorthand property for setting the same width, color, and style on all four borders of an element.

CSS1 Values

['border-width' || 'border-style' | <color>]

CSS2 Values

inherit

Initial

Not defined for shorthand properties.

Applies to

All elements.

Inherited

No.

Notes

This property accepts only one value. To set different values for each side of the border, use the border-width, border-style, or border-color property.


border-bottom, border-left, border-right, border-top

Usage

Shorthand properties for setting the width, style, and color of an element's bottom, left, right, or top border (respectively).

CSS1 Values

['border-bottom-width' || 'border-style' || <color>]
['border-left-width' || 'border-style' || <color>]
['border-right-width' || 'border-style' || <color>]
['border-top-width' || 'border-style' || <color>]

CSS2 Values

inherit

Initial

Not defined.

Applies to

All elements.

Inherited

No.


border-color

Usage

Sets the color of the four borders.

CSS1 Values

<color> (1,4) | transparent

CSS2 Values

inherit

Initial

The value of the <color> property.

Applies to

All elements.

Inherited

No.

Notes

This property accepts up to four values, as follows:

 

One value: Sets all four border colors.

 

Two values: First value for top and bottom; second value for right and left.

 

Three values: First value for top; second value for right and left; third value for bottom.

 

Four values: Top, right, bottom, and left, respectively.


border-bottom-color, border-left-color, border-right-color, border-top-color

Usage

Specifies the colors of a box's border.

CSS1 Values

<color>

CSS2 Values

inherit

Initial

The value of the <color> property.

Applies to

All elements.

Inherited

No.


border-style

Usage

Sets the style of the four borders.

CSS1 Values

none | dotted | dashed | solid | double | groove | ridge | inset | outset

CSS2 Values

inherit

Initial

none

Applies to

All elements.

Inherited

No.

Notes

This property can have from one to four values (see notes under border-color for explanation). If no value is specified, the color of the element itself will take its place.


border-bottom-style, border-left-style, border-right-style, border-top-style

Usage

Sets the style of a specific border (bottom, left, right, or top).

Values

Same as border-style.

Initial

none

Applies to

All elements.

Inherited

No.


border-width

Usage

A shorthand property for setting border-width-top, border-width-right, border-width-bottom, and _border-width-left at the same place in the style sheet.

CSS1 Values

[thin | medium | thick] | <length>

CSS2 Values

inherit

Initial

Not defined.

Applies to

All elements.

Inherited

No.

Notes

This property accepts up to four values (see notes under border-color for explanation).


border-bottom-width, border-left-width, border-right-width, border-top-width

Usage

Sets the width of an element's bottom, left, right, or top border (respectively).

CSS1 Values

[thin | medium | thick] | <length>

CSS2 Values

inherit

Initial

medium

Applies to

All elements.

Inherited

No.


clear

Usage

Indicates which sides of an element's box or boxes may not be adjacent to an earlier floating box.

CSS1 Values

none | left | right | both

CSS2 Values

inherit

Initial

none

Applies to

Block-level elements.

Inherited

No.


height, width

Usage

Specifies the content height or width of a box.

CSS1 Values

<length> | auto

CSS2 Values

<percentage> | inherit

Initial

auto

Applies to

All elements but non-replaced inline elements and table columns; also does not apply to column groups (for height) or row groups (for width).

Inherited

No.


margin

Usage

Shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left at the same place in the style sheet.

CSS1 Values

<length> | <percentage> | auto

CSS2 Values

inherit

Initial

Not defined (shorthand property).

Applies to

All elements.

Inherited

No.


margin-bottom, margin-left, margin-right, margin-top

Usage

Sets the bottom, left, right, and top margins of a box, respectively.

CSS1 Values

<length> | <percentage> | auto

CSS2 Values

inherit

Initial

0

Applies to

All elements.

Inherited

No.


max-height, max-width

Usage

Constrains the height and width of a block to a maximum value.

CSS2 Values

<length> | <percentage> | inherit

Initial

100%

Applies to

All elements.

Inherited

No.

Notes

Percentages refer to the height of the containing block.


min-height, min-width

Usage

Constrains the height and width of a block to a minimum value.

CSS2 Values

<length> | <percentage> | inherit

Initial

0

Applies to

All elements.

Inherited

No.

Notes

Percentages refer to the height of the containing block.


padding

Usage

Shorthand property that sets padding-top, padding-right, padding-bottom, and padding-left at the same place in the style sheet.

CSS1 Values

<length> | <percentage>

CSS2 Values

inherit

Initial

Not defined.

Applies to

All elements.

Inherited

No.


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

Usage

Specifies the width of the white space within a box's top, right, bottom, and left sides.

CSS1 Values

<length> | <percentage>

CSS2 Values

inherit

Initial

0

Applies to

All elements.

Inherited

No.

Notes

Values cannot be negative. Percentage values refer to the width of the containing block.





Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)
ISBN: 0672328860
EAN: 2147483647
Year: 2007
Pages: 305

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net