First value sets
top
; second sets both
left
and
right
; third value sets
bottom
.

4

First value sets
top
; second sets
right
; third sets
bottom
; fourth value sets
left
.

9.3.6.4 The border-width property

The border-width property lets you change the width of the border. Like the bordercolor property, it accepts from one to four values that are applied to the various borders in a similar manner (
Table 9.1
).

Besides a specific length value, you may also specify the width of a border as one of the keywords thin, medium, or thick. The default value, if the width is not explicitly set, is medium. Some typical border widths are:

border: 1px

border: thin thick medium

border: thick 2mm

The first example sets all four borders to exactly one pixel. The second makes the top border thin, the right and left borders thick, and the bottom border medium. The last example makes the top and bottom borders thick, while the right and left borders will be 2 mm wide.

If you are uncomfortable defining all four borders with one property, you can use the individual border-top-width, border-bottom-width, border-left-width, and border-right-width properties to define the thickness of each border. Each property accepts just one value; the default is medium.

Netscape supports this property even when used alone; Internet Explorer 4 honors this property only if borders are enabled through other border properties.

9.3.6.5 The border-style property

According to the CSS model, there are a number of embellishments that you may apply to your HTML

element borders.

The border-style property values include none (default), dotted, dashed, solid, double, groove, ridge, inset, and outset. The border-style-conscious browser applies one to four values for the property to each of the borders in the same order as for the border colors and widths, as described in
Table 9.1.

The browser draws dotted, dashed, solid, and double borders as flat lines atop the tag's background.

The groove, ridge, inset, and outset values create three-dimensional borders: The groove is an incised line; the ridge is an embossed line; the inset border makes the entire tag area appear set into the document; and the outset border makes the entire tag area appear raised above the document. The effect of the three-dimensional nature of these last four styles upon the tag's background image is undefined and left up to the browser. Netscape Communicator 4.06 is now supporting three-dimensional effects.

Neither Internet Explorer nor Netscape supports the dotted or dashed values.

9.3.6.6 Borders in shorthand

Since specifying a complex border can get tedious, the CSS standard provides five shorthand properties that accept any or all of the width, color, and style values for one or all of the border edges. The border-top, border-bottom
,
border-left
,
and border-right properties affect their respective borders sides; the comprehensive border property controls all four sides of the border simultaneously. For example: border-top: thick solid blue

border-left: 1ex inset

border-bottom: blue dashed

border: red double 2px

The first property makes the top border a thick, solid, blue line. The second sets the left border to use an inset effect that is as thick as the x-height of the element's font, while leaving the color the same as the element's color. The third property creates a blue dashed line at the bottom of the element, using the default medium thickness. Finally, the last property makes all four borders a red double line two pixels thick.

That last property raises two issues. First, you cannot supply multiple values to the border property to selectively affect certain borders like you can with the individual bordercolor, border-width, and border-style properties. The border property always affects all four borders around an element.

Secondly, a bit of reflection should reveal that it is not possible to create a double-line border just two pixels thick. In cases like this, the browser is free to adjust the thickness to render the border properly.

While we usually think of borders surrounding block elements like images, tables, and text flows, borders can also be applied to inline tags. This lets you put a box around a word or phrase within a text flow. The implementation of borders on inline tags that span multiple lines is undefined and left to the browser.

Both Netscape and Internet Explorer support the border property, but only Internet Explorer supports the individual side properties.

9.3.6.7 The clear property

Like its cousin attribute for the
tag, the clear property tells the browser whether to place a tag's contents adjacent to a "floating" element, or on the first line below. Text flows around floating elements like images and tables with an align=left or align=right attribute, or any HTML element with its float property set to anything but none.
[The
Tag, 4.7.1] [The float property, 9.3.6.8]

The value of the clear property can be none, left, right, or both. A value of none, the default, means that the browser acts normally and places the tag's contents adjacent to floating elements on either side if there is room to do so. The value left prevents contents from being placed adjacent to a floating element on its left; right prevents placement against a floating element on the right; and both prevents the tag's contents from appearing adjacent to any floating element.

The effect of this style is the same as having preceded the tag with a
tag with its clear attribute.

Hence:

H1 {clear: left}

has the same effect as preceding every

tag with
.

9.3.6.8 The float property

The float property designates a tag's display space as a floating element and causes text to flow around it in a specified manner. It is generally analogous to the align attribute for images and tables, but can be
applied to any element, including text, images, and tables. [The align attribute, 5.2.6.4]
[The align attribute,

11.2.1.1]

The float property accepts one of three values: left, right, or none, the default. Using none disables the float property; the others work like their align attribute-value counterparts, telling the browser to place the content to either side of the flow and allow other content to be rendered next to it.

Accordingly, the styles-conscious browser will place a tag's contents specified with float: left against the left margin of the current text flow, and subsequent content will flow to its right, down and below the tag's contents. The float: right pair puts the tag contents against the right edge of the flow and flows other content on its left, down and below the tag's contents.

Although most commonly used with tables and images, it is perfectly acceptable to apply the float property to a text element. For example, the following would create a "run-in" header, with the text flowing around the header text.

H1 {float: left}

This property is supported by Internet Explorer only for images. Netscape honors it for textual elements as well.

9.3.6.9 The height property

As you might suspect, the height property controls the height of the associated tag's display region. You'll find it most often used with images and tables, but it can be used to control the height of other HTML

document elements as well.

The value of the height property is either a length value or the keyword auto, the default. Using auto implies that the affected tag has an initial height that should be used when displaying the tag. Otherwise, the height of the tag is set to the desired height. If an absolute value is used, the height is set to that length value.

For example:

IMG {height: 100px}

tells the browser to display the image referenced by the tag scaled so that it is 100 pixels tall. If you use a relative value, the base size to which it is relative is browser-and tag-dependent.

When scaling elements to a specific height, the aspect ratio of the object can be preserved by also setting the width property of the tag to auto. Thus: IMG {height: 100px; width: auto}

ensures that the images are always 100 pixels tall, with an appropriately scaled width.
[The width property,

9.3.6.12]

This property is fully supported by Internet Explorer; Netscape honors it only when used with the tag.

9.3.6.10 The margin properties

Like the border properties, the various margin properties let you control the margin space around an element,
just outside of its border (Figure 9.4). Margins are always transparent, allowing the background color or

image of the containing element to show through. As a result, you can specify only the size of a margin; it has no color or rendered style.

The margin-left, margin-right, margin-top, and margin-bottom properties all accept a length or percentage value indicating the amount of space to reserve around the element. In addition, the keyword auto tells the styles-conscious browser to revert to the margins it normally would place around an element. Percentage values are computed as a percentage of the containing element's width. The default margin, if not specified, is zero.

These are all valid margin settings:

BODY {margin-left: 1in; margin-top: 0.5in; margin-right: 1in}

P {margin-left: -0.5cm}

IMG {margin-left: 10%}

The first example creates one-inch margins down the right and left edges of the entire document, and a half-inch margin across the top of the document. The second example shifts the

tag one-half centimeter left into the left margin. The last example creates a margin to the left of the tag equal to ten percent of the parent element's width.

Like the shorthand border property, you can use the shorthand margin property to define all four margins, using from one to four values which affect the margins in the order described in
Table 9.1
. Using this notation, our margins in the previous example also could have been specified as: BODY {margin: 0.5in 1in}

The margin attribute is not supported by Netscape 4.

The margin-left and margin-right properties interact with the width property to determine the
total width of an element, as described in section Section 9.3.6.1, "The CSS formatting model".

9.3.6.11 The padding properties

Like the margin properties, the various padding properties let you control the padding space around an element, between the element's content area and its border (
Figure 9.4). Padding is always rendered using the

background color or image of the element. As a result, you can specify only the size of the padding; it has no color or rendered style.

The padding-left, padding-right, padding-top, and padding-bottom properties all accept a length or percentage value indicating the amount of space the styles-conscious browser should reserve around the element. Percentage values are computed as a percentage of the containing element's width. The default padding is zero.

These are valid padding settings: