| home / programming / css_utopia / chap5 / |    [previous] [next] |
|
|
|
Vertical margins, unlike horizontal margins, are not cumulative. If you have two elements stacked on top of one another, like the h1 and h2 elements in Figure 5.16, the vertical spacing between them will be the greater of the margin-bottom setting of the top element, and the margin-top setting of the bottom element. In this case, they are both 5%, so the distance between the two elements is 5%, not 10% as you might have guessed. If I had defined the margin-bottom of the h1 as 10%, then the vertical distance separating the two elements would have been 10% of the height of the containing block. The containing block in this case is the body, which is, for all practical purposes, the same as the browser window’s client area.
It is possible to use negative values for margin property settings. This comes in handy when you’ve set a margin-left property for the body of an HTML page, but you want to move an element closer to the left margin of the page. The following HTML results in the display shown in Figure 5.17.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Model Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background-color: #808080;
margin-left: 5%;
}
h1 {
background-color: #c0c0c0;
margin-left: -3%;
margin-bottom: 5%;
}
h2 {
background-color: #c0c0c0;
margin-top: 5%;
margin-bottom: 5%;
}
-->
</style>
</head>
<body>
<h1>Body margin is 5%, but I'm set to -3%</h1>
<h2>I have no margin-left setting, so I use the body 5%
setting</h2>
</body>
</html>
As with the padding property, the margin shorthand property lets you set all four margins with a single property declaration, and interprets multiple values using the rules shown in Table 5.1.
Border properties are more complex than padding and margin properties because they affect not only the spacing between objects, but also the appearance of that intervening space. A border can be, and usually is, visible. In most ways, managing border properties is similar to the process for managing margins and padding. But there are some key differences.
Borders have three types of properties: style, width, and color. By default, their style is set to none, their width to medium[11] and their color to the text color of the HTML element to which they are applied.
The border-style property can take any one of a range of constant values. The available values and the browsers that support them are shown in Table 5.2.
Table 5.2. CSS Border Style Constants
| Constant | CSS Spec | Supporting Browsers | Sample |
|---|---|---|---|
| double | CSS1 | All CSS Browsers |  |
| groove |  |
||
| inset |  |
||
| none |  |
||
| outset |  |
||
| ridge |  |
||
| solid |  |
||
| dashed | Netscape 6, Mozilla, IE 5.5/Win, IE 4/Mac |  |
|
| dotted |  |
||
| hidden | CSS2 | Netscape 6, Mozilla, IE 5.5/Win, IE 4/Mac |  |
The hidden value has the same effect as none, except when applied to table layouts. Refer to the border-style property in Appendix C, CSS Property Reference, for further details.
W3C specifications leave the issue of the precise appearance of these borders largely up to the browsers, so don’t be surprised if the results of using these characteristics vary a bit from browser to browser, and platform to platform. But, as is the case with default behaviors for other border settings, the browsers largely treat this issue predictably and satisfactorily within reason.
The width of a border around an object can be set either with four individual property-value pairs, or with the border-width shorthand syntax. The four property-value pairs are border-top-width, border-right-width, border-bottom-width, and border-left-width. Each of these values can be set with a pixel or em value setting, or with one of three descriptive settings: thin, medium, or thick.
If you use the descriptive settings of thin, medium, and thick, the results are browser-dependent. They are, however, fairly predictable and consistent across browsers and operating systems, within a pixel or so for each of the three descriptive settings.
Note that if you wish to use specific measurements for border widths, you should use pixels. This is the most meaningful unit of measurement for screen layouts, which is where border-width is an important property.
You can control the colors associated with all four borders using the border-color shorthand property. Alternatively, you can create different colors for all four borders by using the border-top-color, border-right-color, border-bottom-color, and border-left-color properties.
As I'll explain in greater detail in Chapter 7, Splashing Around a Bit of Color, you can supply a color argument in any of the standard ways: using a full RGB code as in #ff9900, using a three-digit RGB shortcut as in #f90, with the rgb method as in rgb(102,153,0), or using a standard color name as in red.
The shorthand properties border-style, border-width, and border-color all accept multiple values according to the rules in Table 5.1. Note, however, that Netscape Navigator 4.x does not recognize multiple arguments to these properties, nor does it support the side-specific style and color properties.
There is one additional shorthand property that is probably the most widely used approach to defining border properties. Using the border property, you can specify the style, width, and color of all four borders of an object in a compact form. Since a uniform border surrounding an object is most often your desire, this is an efficient way to set border property values.
This property declaration will produce a uniform 3-pixel, solid, green border around any element to which it is legally applied:
border: 3px solid green;
| home / programming / css_utopia / chap5 / | [previous] [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: June 16, 2003
URL: http://webreference.com/programming/css_utopia/chap5
