Box Properties

margin-left, margin-right, margin-top, margin-bottom, margin
Value: [ <length> | <percentage> | auto ]{1,4} (for 'margin' property)
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

These properties set the margin of an element, while the 'margin' property can be used to set the border for all four sides. The other four properties only set their respective side.

For the 'margin' property, the four lengths apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.

For example :

```BODY { margin: 1em 2em 3em } ```

and

```BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em } ```

would produce the same result.

Value: [ <length> | <percentage> | auto ]{1,4}
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

These properties describe how much space is inserted between the border and the content of the element. The order is top, right, bottom, left. A single value applies to all sides, while using two or three values set the respective sides, with the missing values being copied from the opposite side.

If four values are specified they apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.

The surface of the padding area is set with the 'background' property.

Note that 'padding' properties cannot be negative values.

border-top-width, border-right-width, border-bottom-width, border-left-width, border-width
Value: [thin | medium | thick | <length>] {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

The 'border-width' property is a shorthand property for setting 'border-top-width', 'border-right-width', 'border-bottom-width' and 'border-left-width' at the same place in the style sheet.

There can be from one to four values, with the following interpretation:

• one value: all four border widths are set to that value
i.e.
```H1 { border-width: thin } ```

all 4 'border-*-width' properties are set to 'thin'

• two values: top and bottom border widths are set to the first value, right and left are set to the second
i.e.
```H1 { border-width: thin thick } ```

border-top-width and border-bottom-width are set to 'thin', while border-right-width and border-left-width are set to 'thick'

• three values: top is set to the first, right and left are set to the second, bottom is set to the third
i.e.
```H1 { border-width: thin thick medium } ```

border-top-width is set to 'thin', while border-right-width and border-left-width are set to 'thick' and border-bottom-width is set to 'medium'

• four values: top, right, bottom and left, respectively
i.e.
```H1 { border-width: thin thick medium none } ```

border-top-width is set to 'thin', border-right-width is set to 'thick', border-bottom-width is set to 'medium' and border-left-width is set to 'none'

In the examples below, the comments indicate the resulting widths of the top, right, bottom and left borders:

border-top-color, border-right-color, border-bottom-color, border-left-color, border-color
Value: <color> | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

These properties set the border colour properties for all four borders of the element, with border-color being short hand for the other four properties. The reasoning for setting individual border colours is as for border widths, namely that 1 to 4 values can be used in the border-color property, with missing declarations using that declared for the opposite side.

border-top-style, border-right-style, border-bottom-style, border-left-style, border-style
Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

These properties set the border style properties for all four borders of the element, with border-style being short hand for the other four properties. The reasoning for setting individual border styles is as for border widths, namely that 1 to 4 values can be used in the border-style property, with missing declarations using that declared for the opposite side.

The various styles are as follows:

none
no border is drawn (regardless of the 'border-width' value)
dotted
the border is a dotted line drawn on top of the background of the element
dashed
the border is a dashed line drawn on top of the background of the element
solid
the border is a solid line
double
the border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the <border-width> value.
groove
a 3D groove is drawn in colors based on the <color> value.
ridge
a 3D ridge is drawn in colors based on the <color> value.
inset
a 3D inset is drawn in colors based on the <color> value.
outset
a 3D outset is drawn in colors based on the <color> value.

border-top, border-right, border-bottom, border-left, border
Value: <border-*-width> | <border-*-style> | <border-*-color> | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A

The border properties can be used to globally set the border widths, styles and colours for all four borders of an element. For example, the first rule below is equivalent to the set of four rules shown after it:

```P { border: solid red } P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red } ```

Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

Since the properties to some extent have overlapping functionality, the order in which the rules are specified becomes important. Consider this example:

``` BLOCKQUOTE { border-color: red; border-left: double color: black; } ```

In the above example, the color of the left border will be black, while the other borders are red. This is due to 'border-left' setting the width, style and color. Since the color value is not specified on the 'border-left' property, it will be taken from the 'color' property. The fact that the 'color' property is set after the 'border-left' property is not relevant.

Note that while the 'border-width' property accepts up to four length values, this property only accepts one.

width
Value: <length> | <percentage> | auto
Initial: auto
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

This property can be applied to text elements, but it is most useful with inline images and similar insertions. The width is to be enforced by scaling the image if necessary, preserving the aspect ratio of the image if the 'height' property is 'auto'.

height
Value: <length> | auto
Initial: auto
Applies to: block-level and replaced elements
Inherited: no
Percentage values: N/A

As above, this property can be applied to text, but it is most useful with inline images and similar insertions. The height is to be enforced by scaling the image if necessary, preserving the aspect if the 'width' property is 'auto'.

float
Value: left | right | none
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

This property is most often used with inline images, to allow floating images (c.f. `<IMG ALIGN ...>`

clear
Value: none | left | right | both
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

This property specifies if elements allow floating elements (normally images) to the left or right. With 'clear' set to 'left', an element will be moved below any floating element on the left side. (c.f. `<BR CLEAR= ...>`)

 file: /Techref/language/html/ib/Style_Sheets/boxprop.htm, 10KB, , updated: 2004/3/1 15:47, local time: 2024/2/23 08:06, TOP NEW HELP FIND:  44.222.218.145:LOG IN

 ©2024 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions?Please DO link to this page! Digg it! / MAKE! Box properties

After you find an appropriate page, you are invited to your to this massmind site! (posts will be visible only to you before review) Just type a nice message (short messages are blocked as spam) in the box and press the Post button. (HTML welcomed, but not the <A tag: Instead, use the link box to link to another page. A tutorial is available Members can login to post directly, become page editors, and be credited for their posts.

Attn spammers: All posts are reviewed before being made visible to anyone other than the poster.
 Did you find what you needed? "No. I'm looking for: " "No. Take me to the search page." "No. Take me to the top so I can drill down by catagory" "No. I'm willing to pay for help, please refer me to a qualified consultant"

.