Box Model
There are several properties that can be used to effect the size of and add borders to elements, often <div>s, but it could be just about any displayed element, block-level or inline. Some elements that are displayed which are neither block-level or inline can have odd effects (mostly <li> and <td>) though certain things, such as applying borders and padding, are done frequently. Also, setting width and height may cause overflow -- leaving one at default, auto, allows the box to grow as needed in one direction.
See width, height, margin, border, and padding for details on each.
How big are elements, anyway?
If you set the width and height of an element, you still don't know the size of an element if the other box model properties are set (margin, border, and padding). Following are the formulas (not worth memorizing-- they're obvious if you understand them), assuming the padding, margin, and border are even on all sides:
Height: height + 2 * ( padding + border + margin )
Width: width + 2 * ( padding + border + margin )
Back to Knowledge Dump