Giving one value for margin or padding will apply that value to all sides of an element. And the border property is shorthand for specifying a border’s width, style, and color all at once. So we’ve got a box with 10 pixels of padding, 25 pixels of margin, and 5 pixels of border on all sides. There are several ways to measure the box’s dimensions: The most obvious way to the human eye is to measure from the outside edges of the border. By this measurement, our box is 80 pixels wide (50 pixels of content, plus 10 pixels of padding on either side and 5 pixels of border on either side) and 80 pixels tall. Let’s call this the border box. This corresponds to the offsetWidth and offsetHeight DHTML properties. A related approach would be to measure from the inside edges of the border. By this measurement, our box is 70 pixels wide (50 pixels of content, plus 10 pixels of padding on either side) and 70 pixels tall. Let’s call this the padding box. It corre- sponds to the clientWidth and clientHeight DHTML properties. The way CSS approaches it is to measure the dimensions of the invisible content box. How much usable space is there within the box? By this measurement (exclud- ing all margins, padding, and border), our box would be 50 pixels square, just like we wrote in the CSS. Let’s call this the content box. A computed style call (i.e., Element.getStyle) would report these dimensions. The all-encompassing approach involves the total amount of space this element occupies. In other words, how big would its parent element need to be in order to contain it? By this measurement, our box would be 130 pixels square: 25 pixels of margin, 5 pixels of border, 10 pixels of padding, 50 pixels of content, 10 more pixels of padding, 5 more pixels of border, and 25 more pixels of margin. Let’s call this the margin box. All four of these approaches have an argument for representing the “true” dimen- sions of a box. In an ideal world, we’d have a pleasant, uniform API for retrieving all four. But in the actual world, only two come easily; the rest are left as an arithmetic exercise for developers. DHTML Properties Two properties, clientWidth and clientHeight, are available on every DOM node to report the dimensions of an element’s padding box. These two properties return integers: CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US198 $('box').clientWidth; //-> 50 $('box').clientHeight; //-> 50 Likewise, offsetWidth and offsetHeight report the dimensions of an element’s border box: $('box').offsetWidth; //-> 80 $('box').offsetHeight; //-> 80 For the content box, it’s not quite as simple. The quickest path to the answer is a call to Element.getStyle, parsing the result into an integer: var width = $('box').getStyle('width'), height = $('box').getStyle('height'); width; //-> "50px" height; //-> "50px" parseInt(width, 10); //-> 50 parseInt(height, 10); //-> 50 This tactic has the disadvantage of being far slower. Luckily, offsetWidth and clientWidth are often good enough, approximating the actual values nearly enough to justify the optimization. Don’t use the computed style approach unless you need total accuracy. CSS Positioning (Static, Absolute, and Relative) Those of you who are comfortable with CSS may not need a crash course, but CSS posi- tioning is complex enough that it warrants coverage. CSS defines four different values for the position property, corresponding to four different ways to determine an element’s position on the page. Three of them enjoy wide support: static, absolute, and relative. Static Positioning The default value, static, works the way you’re used to. Elements are arranged from top to bottom in the order they appear on the page. In this mode, the CSS properties for posi- tioning ( top, bottom, left, and right) have no effect. CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US 199 Absolute Positioning Here’s where things get weird. Absolute positioning doesn’t care about the order of ele- ments on the page. It treats the entire document as a grid, letting you place elements according to pixel coordinates. For instance, I can create a box and place it on the screen anywhere I want (see Figure 9-6): <! HTML: > <div id='box'>Absolutely positioned</div> /* CSS: */ #box { position: absolute; width: 600px; height: 300px; top: 50px; left: 25px; background-color: #ddd; } Figure 9-6. An absolutely positioned block-level element CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US200 In this example, the top-left corner of the page is the origin of the grid. A top value of 50px means that the top edge of the box will be placed 50 pixels from the top edge of the canvas. Likewise, the left edge of the box will be placed 25 pixels from the left edge of the canvas (see Figure 9-7). <! HTML: > <div id='box'>Absolutely positioned</div> <div id='box2'>Also absolutely positioned</div> /* CSS: */ #box { position: absolute; width: 600px; height: 300px; top: 50px; left: 25px; background-color: #ddd; } #box2 { position: absolute; width: 600px; height: 300px; top: 100px; left: 75px; background-color: #888; } When an element is given absolute positioning, it’s taken out of the ordinary docu- ment “flow”—its statically positioned brethren no longer account for it or make space for it. CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US 201 Figure 9-7. Two absolutely positioned block-level elements The z-index Property I wasn’t entirely accurate when I said that order doesn’t matter with absolute positioning. In this example, the two elements overlap quite a bit, so order is used to determine which one should be “on top.” But the CSS z-index property lets us override that default ordering (see Figure 9-8): #box { position: absolute; width: 600px; height: 300px; top: 50px; left: 25px; background-color: #ddd; z-index: 2; } CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US202 Figure 9-8. Two absolutely positioned elements. The first has a larger z-index value than the second, so it appears in front. The grid analogy serves us well here. Imagine that left/right and top/bottom con- trol the x and y axes of the grid; z-index controls the z axis, otherwise known as the depth. Numbers refer to layers on the page; a higher number represents a layer “closer” to the user. That’s why the second box appears on top of the first. If two elements have the same z-index value (or have no z-index defined), then their order on the page determines which one is on top. But here, by giving the first box a z-index of 2, we’ve ensured that it will appear above the second box. Relative Positioning Relative positioning is the most confusing—it’s a mix of static and absolute positioning. Like absolute positioning, it r esponds to the top, bottom, left, and right properties . U nlike absolute positioning, it does not remov e an element from the document flow. Also, the element is positioned relative to its own top-left corner—not the top-left corner of the document (see Figure 9-9). CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT.ACULO.US 203 . an element. And the border property is shorthand for specifying a border’s width, style, and color all at once. So we’ve got a box with 10 pixels of padding, 25 pixels of margin, and 5 pixels. CSS properties for posi- tioning ( top, bottom, left, and right) have no effect. CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT .ACULO. US 199 Absolute Positioning Here’s where things get. of the ordinary docu- ment “flow”—its statically positioned brethren no longer account for it or make space for it. CHAPTER 9 ■ WHAT YOU SHOULD KNOW ABOUT DHTML AND SCRIPT .ACULO. US 201 Figure 9-7.