The CSS Box Model
As mentioned earlier, the area occupied by a block element is made up of a margin, a border, padding and the actual client area. The height and width specifications for the element in a CSS rule refer to the client area only. It should be noted that the element border, if present, is drawn outside the padding.
Browsers, especially IE, tend to interpret the CSS box model in their own way. This makes it difficult to design web pages that will render reliably across a range of browsers. Ultimately there is no substitute for thorough testing. However, specifying that the document uses the strict HTML 4.0 document type definition can make things a great deal easier. This can be done by using the following doctype declaration at the top of your HTML files
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
//EN" "http://www.w3.org/TR/html4/strict.dtd">
With the strict DTD in use IE, Firefox and Opera all include the space occupied by the element padding when its offsetWidth/Height or clientWidth/Height methods are called.
CSS allows the left, top, right and bottom values for margin, border and padding to be specified separately. While this is rarely necessary, it does offer the designer the ability to finely control the appearance of page display.
A final note - it should be clear by now that browsers render HTML elements on-screen in a sequence of notional boxes characterized by properties such as color, background, border, margin, padding etc. Depending on the type of HTML element, the rendition can result in the flow of surrounding elements to be broken. Such issues are discussed at length in various other pages on this site. For brevity we frequently talk of boxes
when referring to HTML elements.
