The Box Model

When you are trying to learn how CSS positioning works, you'll read a lot about the "box model." I'm not sure that the box model concept doesn't confuse more people than it helps but, for what it's worth, here it is:

Each element in a document is considered to be a rectangular box which has a content area and may be surrounded by padding, a border, and margins. There are two types of boxes, block and inline. Block boxes are generated by elements such as <p>, <div> or <table>. Inline boxes are generated by tags such as <b>, <i> or <span>, and actual content such as text and images.

Here is the CSS rule we used to create the box below:

#box {
margin: 6px auto;
width: 540px;
border: 1px solid #666666;
padding: 24px;
}

ruler

The box should be exactly 590 pixels wide in all standards compliant browsers, including IE6. You can check it in different browsers using the ruler above the box.

Some of you may be wondering why the box is 590 pixels wide when we specified a width of 540 pixels. CSS specifications state that the width of a box is the sum of its declared width plus its border and padding. So, in a standards-compliant browser this box is calculated as follows:

540  (declared width)
 48  (left and right padding)
  2  (left and right border)
----
590px total rendered width