July 23, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Box Properties

  • October 1, 1999
  • By Jerry Honeycutt
  • Send Email »
  • More Articles »

W3C's style sheet recommendation provides you the capability to define the borders, margins, and padding for elements on the Web page. You can wrap a border around a heading, for example, or change the margins of the <P> tag so that any occurrences of this tag are indented into the page. Here's an overview of the properties that you can use to change the boxes associated with an element:

Border You use the border properties to set the left, right, top, and bottom borders of an element. You can set the border's width, color, and style.
Margin You use the margin properties to set the left, right, top, and bottom margins of an element. With these properties, you only specify the size of the margin.
Padding You use the padding properties to specify how much space the browser displays between the border and the content of the element. With the padding properties, you only specify the size of the margin.

Figure B.1 shows you how the border, margin, and padding properties work with the height and width properties to form the boxes around the element. The following list describe these in more detail:
  • The height and width properties determine the overall size of the element's containing box.

  • The margin properties determine the element's margins within its containing box.

  • The border properties determine the position of the border within the element's margins.

  • The padding properties determine the amount of space between the element's border and the contents of the element itself.

You can group border properties in five different ways. You can specify the properties for a particular side of the element, using border-top, border-right, border-bottom, or border-left. You can also specify all sides of the border at one time by using border.

With any of these attributes, you specify the width, style, and color of the border, as in the following example:

border-top: thin dotted black

FIG. B.1
Four boxes are actually around each element.

You can group the margin properties using margin. You specify the top, right, bottom, and left, like this:

margin: .5in 1in .5in 1in

You can also group the margin properties using padding. You specify the top, right, bottom, and left padding values, like this:

padding: .25in .25in .25in .25in

If you specify only one value, the browser uses that value for all sides. If you leave out one or more values, the browser takes the missing value from the opposite side. For example, if you leave off the last value (left), the browser sets the left padding to the value you specified for the right margin.

border-bottom-width

You set the width of the bottom border by using the border-bottom-width property. This doesn't affect the other sides of the border. You can assign any of the values described in Table B.4 to this property.

Table B.4  border-bottom-width Values

Value Description
thin Displays the border by using a thin line.
medium Displays the border by using a medium line.
thick Displays the border by using a thick line.
length You can define the exact width of the border by using points (pt), inches (in), centimeters (cm), or pixels (px); (for example, 2in).

border-color

The border-color property sets the color of the element's border. You can use a named color, such as RED, or you can use an RGB value, such as #FF0000.

border-left-width

You set the width of the left border by using the border-left-width property. This doesn't affect the other sides of the border. You can assign any of the values described in Table B.6 to this property.

border-right-width

You set the width of the right border by using the border-right-width property. This doesn't affect the other sides of the border. You can assign any of the values described in Table B.6 to this property.

border-style

The border-style property determines the style of the border that the browser displays. You can specify from one to four values for this property:

One Value All four borders are set to the style.
Two Values The top and bottom borders are set to the style in the first value, and the left and right borders are set to the style in the second value.
Three Values The top border is set to the style in the first value; the right and left borders are set to the style in the second value; and the bottom border is set to the style in the third value.
Four Values The top border is set to the style in the first value; the right border is set to the second value; the bottom border is set to the third value; and the left border is set to the fourth value.

Table B.5 describes the values you can use for a border's style.

Table B.5  border-style Values

Value Description
none No border.
dotted Dotted line drawn over the top of the element.
dashed Dashed line drawn over the top of the element.
solid Solid line.
double Double line drawn over the top of the element; the width of the two lines and the space between them equals the border-width value.
groove 3-D groove drawn in colors based upon color.
ridge 3-D ridge drawn in colors based upon color.
inset 3-D inset drawn in colors based upon color.
outset 3-D outset drawn in colors based upon color.

border-top-width

You set the width of the top border by using the border-top-width property. This doesn't affect the other sides of the border. You can assign any of the values described in Table B.7 to this property.


TROUBLESHOOTING: I've set the width of my border, but it still doesn't display. Setting the width of the border isn't enough. You also have to set the border style by using the border-style property because the default style for every border is none.

clear

The clear property determines whether the browser can display floating elements on the sides of an element. The property's value indicates the sides on which floating elements are not allowed. For example, clear: left means that the browser can't float elements on the left side of the element. Table B.6 describes the values you can assign to this property.

Table B.6  clear Values

Value Description
none Floating elements are allowed on all sides.
left Floating elements are not allowed on the left.
right Floating elements are not allowed on the right.
both Floating elements are not allowed on either side.

float

The float property specifies that the element is floated to the left or right side, with the surrounding elements flowing around it. Table B.7 describes the values you can assign to this property.

Table B.7  float Values

Value Description
none Displays the element where it is
left Move to the left and wrap text around it
right Move to the right and wrap text around it

height

You set the total height of the element with the height property. You can set this property for text blocks or images. For example, you can use the height and width properties to create a special warning on the Web page that has a fixed size. Height is more useful with images, however. You can set this property to any length, a percentage value, or auto, which lets the browser determine the best size for the element.

margin-bottom

You set the bottom margin by using the margin-bottom property. You can specify any valid length, a percentage value (relative to the height and width) of the element, or auto, which lets the browser determine the best margins to use for the element. You can also use a negative margin size to create special effects such as hanging indents.

margin-left

You set the left margin by using the margin-left property. You can specify any valid length, a percentage value (relative to the height and width) of the element, or auto, which lets the browser determine the best margins to use for the element. You can also use a negative margin size to create special effects.

margin-right

You set the right margin by using the margin-right property. You can specify any valid length, a percentage value (relative to the height and width) of the element, or auto, which lets the browser determine the best margins to use for the element. You can also use a negative margin size to create special effects.

margin-top

You set the top margin by using the margin-top property. You can specify any valid length, a percentage value (relative to the height and width) of the element, or auto, which lets the browser determine the best margins to use for the element. You can also use a negative margin size to create special effects.

padding-bottom

The padding-bottom property specifies the amount of space to display between the element's bottom border and the element's contents. You can set this property to a valid length or a percentage value (relative to the height and width) of the element.

padding-left

The padding-left property specifies the amount of space to display between the element's left border and the element's contents. You can set this property to a valid length or a percentage value (relative to the height and width) of the element.

padding-right

The padding-right property specifies the amount of space to display between the element's right border and the element's contents. You can set this property to a valid length or a percentage value (relative to the height and width) of the element.

padding-top

The padding-top property specifies the amount of space to display between the element's top border and the element's contents. You can set this property to a valid length or a percentage value (relative to the height and width) of the element.

width

You set the total width of the element with the width property. You can set this property for text blocks or images. You can set this property to any length, a percentage value, or auto, which lets the browser determine the best size for the element.

© Copyright Macmillan Computer Publishing. All rights reserved.






Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel