Box Properties

An element's box is an important part of its display, and quite a few style properties work with the box.

border

• CSS1 values: [< border-width >< border-style >< color >]

• CSS2 values: inherit

• Default value: Varies

• Element support: All elements

• Browser support: [IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

This shorthand property lets you set the border-width , border-style , and color for all four borders of a box at once. List values for those properties in that order. Of course, you can also set these properties individually.

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

• CSS1 values: [<border-top/right/bottom/left-width><border-style><color>]

• CSS2 values: inherit

• Default value: Varies

• Element support: All elements

• Browser support: [IE4, IE5, IE6]

• Style inherited: No

These properties give the width, style, and color of the top, right, bottom, and left borders of a box. See Table 9-1 for possible settings.

border-color

• CSS1 values: <color>{1,4}transparent

• CSS2 values: inherit

• Default value: Varies

• Element support: All elements

• Browser support: [IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

This property gives the color of all four borders of a box.

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

• CSS1 values: <color>

• CSS2 values: inherit

• Default value: Varies

• Element support: All elements

• Browser support: [IE4, IE5, IE6]

• Style inherited: No

These properties give the color of one border of a box, such as the border's top.

border-style

• CSS1 values: <border-style>{1,4}

• CSS2 values: inherit

• Default value: varies

• Element support: All elements

• Browser support: [IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

This property indicates the style of the four borders of a box. It can have from one to four values (the values are set on the different sides of the box).

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

• CSS1 values: <border-style>

• CSS2 values: inherit

• Default value: None

• Element support: All elements

• Browser support: [IE4, IE5, IE6]

• Style inherited: No

This property lets you specify the style of a one border edge of a box. See Table 9-1 for possible values.

border-width

• CSS1 values: <border-width>{1,4}

• CSS2 values: inherit

• Default value: Not defined

• Element support: All elements

• Browser support: [IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

This property lets you set specify the border width, setting the border-top-width , border-right-width , border-bottom-width , and border-left-width properties all at the same time.

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

• CSS1 values: <border-width>

• CSS2 values: inherit

• Default value: medium

• Element support: All elements

• Browser support: [IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

These properties let you set the border widths of a box's sides, one by one.

clear

• CSS1 values: noneleftrightboth

• CSS2 values: inherit

• Default value: None

• Element support: Block-level elements

• Browser support: [IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

This property lets you specify how another box should "clear" the current one, much like the CLEAR attribute in HTML. In particular, it specifies which borders of an element's boxes may not be next to an earlier floating element.

height, width

• CSS1 values: <length><percentage>auto

• CSS2 values: inherit

• Default value: auto

• Element support: All elements except inline elements, table columns , and column groups

• Browser support: [IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

These properties set the height or width of boxes.

margin

• CSS1 values: <margin-width>{1,4}

• CSS2 values: inherit

• Default value: Not defined

• Element support: All elements

• Browser support: [IE3, IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

This shorthand property sets the margin-top , margin-right , margin-bottom , and margin-left properties all at the same time.

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

• CSS1 values: <margin-width>

• CSS2 values: inherit

• Default value: 0

• Element support: All elements

• Browser support: [IE3, IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

These properties let you set the width of the top, right, bottom, or left margins of a box.

max-height, max-width

• CSS2 values: <length><percentage>noneinherit

• Default value: None

• Element support: All elements except non- replaced inline elements and table elements

• Browser support: [IE4, IE5, IE6]

• Style inherited: No

These properties let you restrict box heights and widths to a range that you specify.

min-height

• CSS2 values: <length><percentage>inherit

• Default value: 0

• Element support: All elements except non-replaced inline elements and table elements

• Browser support: [None]

• Style inherited: No

This property lets you set the minimum height of a box.

min-width

• CSS2 values: <length><percentage>inherit

• Default value: 0

• Element support: All elements except non-replaced inline elements and table elements

• Browser support: [None]

• Style inherited: No

This property lets you set the minimum width of a box.

padding

• CSS1 values: <length><percentage>

• CSS2 values: inherit

• Default value: Not defined

• Element support: All elements

• Browser support: [IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

This property lets you set the padding-top , padding-right , padding-bottom , and padding-left properties all at the same time and to the same value.

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

• CSS1 values: <length><percentage>

• CSS2 values: inherit

• Default value: 0

• Element support: All elements

• Browser support: [IE4, IE5, IE6, NS4, NS6]

• Style inherited: No

These properties let you set the top, right, bottom, and left padding of a box, which surrounds the content of the box.