CSS Box Properties

Css

Upper boundary

Syntax: Margin-top: < value >

Allowable value: < length > | <% > | Auto

Initial value: 0

Apply to: all elements

Backward compatible: No

The upper boundary property sets the upper boundary of an element with a specified length or percentage value. The percent value refers to the width of the ancestor element. Negative margins are allowed.

For example, the following rules will eliminate the upper bounds of the file.

Body {margin-top:0}
Note that if the boundary is contiguous (overlapping) vertically, the maximum of that boundary value is converted.

Right border

Syntax: Margin-right: < value >

Allowable value: < length > | <% > | Auto

Initial value: 0

Apply to: all elements

Backward compatible: No

The right boundary property sets the right boundary of the element with a specified length or percentage value. The percent value refers to the width of the ancestor element. Negative margins are allowed.

For example:

P.narrow {margin-right:50%}
Note If the boundary is contiguous (overlapping) horizontally, the other boundary values will not be converted.

Lower border

Syntax: Margin-bottom: < value >

Allowable value: < length > | <% > | Auto

Initial value: 0

Apply to: all elements

Backward compatible: No

The bottom boundary property sets the bottom bounds of the element with a specified length or percentage value. The percent value refers to the width of the ancestor element. Negative margins are allowed.

For example:

DT {Margin-bottom:3em}
Note that if the boundary is contiguous (overlapping) vertically, the maximum of that boundary value is converted.

Left boundary

Syntax: Margin-left: < value >

Allowable value: < length > | <% > | Auto

Initial value: 0

Apply to: all elements

Backward compatible: No

The left boundary property sets the left edge of the element with a specified length or percentage value. The percent value refers to the width of the ancestor element. Negative margins are allowed.

For example:

Address {margin-left:50%}
Note If the boundary is contiguous (overlapping) horizontally, the other boundary values will not be converted.

Boundary

Syntax: margin: < value >

Allowable value: [< length > | < percent > | Auto]{1,4}

Initial value: Not defined

Apply to: all elements

Backward compatible: No

The Boundary property sets the bounds of the element with one to four values, each of which is a length, a percentage, or an automatic. The percent value refers to the width of the ancestor element. Negative margins are allowed.

If the four values are given, they are applied to the top, right, bottom, and left edges respectively. If only one value is given, it is applied to all boundaries. If two or three values are given, the omitted values are equal to the edges.

The border statement consists of the following examples:

Body {MARGIN:5EM}/* All boundaries are set to 5EM * *
P {margin:2em 4em}/* Upper and lower bounds are 2em, left and right boundary is 4em * * *
DIV {margin:1em 2em 3em 4em}/* Upper boundary is 1em, right side is 2em, bottom boundary is 3em, left side is 4em * *
Note that if the boundary is contiguous (overlapping) vertically, the maximum of that boundary value is converted. and the horizontal direction is not.

You can use boundary properties to set all boundaries at once, or you can choose to use upper, lower, left, and right boundary properties.

On filler

Syntax: Padding-top: < value >

Allowable value: < length > | <% >

Initial value: 0

Apply to: All objects

Backward compatible: No

The Padding property describes how many spaces are between the top border and the contents of the selector. The value can be a length or a percentage. The value of a percentage refers to the width of the ancestor element. Negative values cannot be used.

Right filler

Syntax: Padding-right: < value >

Allowable value: < length > | <% >

Initial value: 0

Apply to: All objects

Backward compatible: No

The right Padding property describes how many spaces between the right border and the contents of the selector. The value can be a length or a percentage. The value of a percentage refers to the width of the ancestor element. Negative values cannot be used.

Down filler

Syntax: Padding-bottom: < value >

Allowable value: < length > | <% >

Initial value: 0

Apply to: All objects

Backward compatible: No

The bottom padding property describes how many intervals between the contents of the bottom border and the selector are. The value can be a length or a percentage. The value of a percentage refers to the width of the ancestor element. Negative values cannot be used.

Left filler

Syntax: Padding-left: < value >

Allowable value: < length > | <% >

Initial value: 0

Apply to: All objects

Backward compatible: No

The left Padding property describes how many spaces between the left border and the contents of the selector. The value can be a length or a percentage. The value of a percentage refers to the width of the ancestor element. Negative values cannot be used.

Filler

Syntax: padding: < value >

Allowable value: [< length > | < percent]{1,4}

Initial value: 0

Apply to: All objects

Backward compatible: No

Filler properties are the upper padding, the right filler, the lower filler and the left padding properties of the slightly written.

The filler of an element is the number of intervals between the border and the contents of the element. You can give a value from one to four, each value can be a length or a percentage. The percent value refers to the width of the ancestor element. Negative values cannot be used.

If four values are given, they apply to the top, right, bottom, and left fillers respectively. If a value is given, it is applied to each side. If two or three values are given, the omitted values are equal to the edges.

For example, the following rule sets the filler to 2EM, the right filler is 4em, the next filler for 5em, and the left filler for 4em:

BLOCKQUOTE {padding:2em 4em 5em}

Top Border Width

Syntax: Border-top-width: < value >

Allowable Value: Thin | Medium | Thick | < length >

Initial value: Medium

Apply to: All objects

Backward compatible: No

The top box Width property is used to specify the width of the top border of an element. The value can be one of three keywords, not affected by the font size or length, and can be used to achieve proportional widths. Negative values are not allowed.

You can also use the properties of the top border, the width of the borders, or the border to write slightly.

Right Border width

Syntax: Border-right-width: < value >

Allowable Value: Thin | Medium | Thick | < length >

Initial value: Medium

Apply to: All objects

Backward compatible: No

The right border Width property is used to specify the width of the right border of the element. The value can be one of three keywords, not affected by the font size or length, and can be used to achieve proportional widths. Negative values are not allowed.

You can also use the properties of the right border, the width of the borders, or the border to write slightly.

Bottom Border Width

Syntax: Border-bottom-width: < value >

Allowable Value: Thin | Medium | Thick | < length >

Initial value: Medium

Apply to: All objects

Backward compatible: No

The bottom border Width property is used to specify the width of the bottom border of the element. The value can be one of three keywords, not affected by the font size or length, and can be used to achieve proportional widths. Negative values are not allowed.

You can also use the properties of the bottom border, the width of borders, or the border to write slightly.

Left Border width

Syntax: Border-left-width: < value >

Allowable Value: Thin | Medium | Thick | < length >

Initial value: Medium

Apply to: All objects

Backward compatible: No

The left Border Width property is used to specify the width of the left border of the element. The value can be one of three keywords, not affected by the font size or length, and can be used to achieve proportional widths. Negative values are not allowed.

You can also use the properties of the left border, the width of the bounding box, or the border to write slightly.

Border width

Syntax: Border-width: < value >

Allowable value: [Thin | medium | thick | < length >]{1,4}

Initial value: Not defined

Apply to: All objects

Backward compatible: No

The border Width property sets the bounds of an element with a value of one to four values, which is a keyword or length. Negative length is not allowed.

If four values are given, they apply to the style of the top, right, bottom, and left borders respectively. If a value is given, it is applied to each side. If two or three values are given, the omitted values are equal to the edges.

This property is abbreviated for the top border width, the right border width, the bottom border width, and the left bounding width property.

You can also use a border property that is slightly written.

Border color

Syntax: Border-color: < value >

Allowable value: < color >{1,4}

Initial value: The value of the Color property

Apply to: All objects

Backward compatible: No

The border color property sets the border color of an element. You can use one or four keywords. If four values are given, they apply to the style of the top, right, bottom, and left borders respectively. If a value is given, it is applied to each side. If two or three values are given, the omitted values are equal to the edges.

You can also use a border property that is slightly written.

Border Style

Syntax: Border-style: < value >

Allowable values: [none | dotted | dashed | solid | double | groove | ridge | inset | outset]{1,4}

Initial value: None

Apply to: All objects

Backward compatible: No

The border Style property is used to set the style of an element border. This property must be used to specify a visible border.

You can use one or four keywords. If four values are given, they apply to the style of the top, right, bottom, and left borders respectively. If a value is given, it is applied to each side. If two or three values are given, the omitted values are equal to the edges.

You can also use a border property that is slightly written.

Top Border

Syntax: Border-top: < value >

Allowable value: < top border Width > | | < border Style > | | < color >

Initial value: Not defined

Apply to: All objects

Backward compatible: No

The top border property is an abbreviated write that sets the width, style, and color of the bounding box for an element.

Note You can only give a border style.

You can also use a border property that is slightly written.

Right border

Syntax: Border-right: < value >

Allowable value: < right border width > | | < border Style > | | < color >

Initial value: Not defined

Apply to: All objects

Backward compatible: No

The right Border property is an abbreviated write that sets the width, style, and color of the right border of an element.

Note You can only give a border style.

You can also use a border property that is slightly written.

Bottom Box

Syntax: Border-bottom: < value >

Allowable value: < bottom border width > | | < border Style > | | < color >

Initial value: Not defined

Apply to: All objects

Backward compatible: No

The bottom Border property is an abbreviated write about the width, style, and color of the bottom border of an element.

Note You can only give a border style.

You can also use a border property that is slightly written.

Left border

Syntax: Border-left: < value >

Allowable values: < Left border Width > | | < border Style > | | < color >

Initial value: Not defined

Apply to: All objects

Backward compatible: No

The left Border property is an abbreviated write that sets the width, style, and color of the left border of an element.

Note You can only give a border style.

You can also use a border property that is slightly written.

Border

Syntax: border: < value >

Allowable values: < border width > | | <r border Style > | | < color >

Initial value: Not defined

Apply to: All objects

Backward compatible: No

A border property is an abbreviated write that sets the width, style, and color of an element's border.

Examples of border declarations include:

H2 {Border:groove 3em}
a:link {Border:solid Blue}
a:visited {Border:thin dotted #800080}
a:active {Border:thick Double red}
Border properties can only be set to four borders; only the width and style of a set of borders can be given. To give a different value to the four borders of an element, Web page makers must use one or more attributes such as the top border, the right border, the bottom border, the left box, the borders color, the borders width, the border style, the top border width, the right box width, the bottom frame width, or the left box width.

Width

Syntax: Width: < value >

Allowable value: < length > | <% > | Auto

Initial value: Auto

Applies To: block-level and substitution elements

Backward compatible: No

Each block level or replacement element can specify its width with a length or "auto" value. (The substitution element refers only to some elements of the known original size.) HTML replacement elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT. The initial value of the Width property is "Auto", which is the original width of the element (there is the element's own width, such as the width of an image). Percent refers to the width of the ancestor element. Negative length values are not allowed.

This generic property is used to give a public length of some input elements, as if the Submit and Reset buttons:

Input.button {Width:10em}

Height

Syntax: Height: < value >

Allowable value: < length > | Auto

Initial value: Auto

Applies To: block-level and substitution elements

Backward compatible: No

Each block level or replacement element can specify its height with a length or "auto" value. (The substitution element refers only to some elements of the known original size.) HTML replacement elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT. The initial value of the Height property is "Auto", which is the original height of the element (there is the height of the element itself, such as the height of an image). Negative length values are not allowed.

As with width properties, height can be applied to set the proportions of the image:

Img.foo {width:40px; height:40px}
In most cases, we recommend that Web makers use image editing software to scale the image proportionally, because it is not possible for browsers to scale images in high quality, and because using this property to shrink the image can cause users to download an unnecessarily large file. Even so, scaling through the width and height attributes is still a useful choice for overcoming visual problems in the user-defined style sheet.

Floating

Syntax: float: < value >

Allowable Value: Left | Right | None

Initial value: None

Apply to: all elements

Backward compatible: No

The Float property allows the Web page creator to wrap text around an element. This is the same as the Align=left and align=right of the IMG element in HTML 3.2, but CSS1 allows all objects to "float", unlike HTML 3.2, which only allows images and tables.

Clear

Syntax: clear: < value >

Allowable Value: none | Left | Right | Both

Initial value: None

Apply to: all elements

Backward compatible: No

Clears the property to specify whether an element allows an element to float beside it. The value left moves the element to the bottom of the floating element on its left-hand side, and the same value right moves below the floating element on its right-hand side. The other also has the default none value, and the none value below the floating element that moves the element to its sides. This property is similar to the function <br Clear=left|right|all|none> of HTML 3.2, but it can be applied to all elements.