Practical prototype and part 35: The information in this book is distributed on an "as is" basis, without warranty Although every pre-caution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. | 198 CHAPTER 9 WHAT YOU SHOULD KNOW ABOUT DHTML AND 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 corresponds 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 excluding 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 . 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 dimensions of a box. In an ideal world we d have a pleasant uniform
