The box model

A Simple Example

You may create a box around any part of your web page by containing it within a <div> tag.

To see what your computer screen would look when using the box model open this window

Here is the CSS code and the XHTML used to produce the layout above.

Take a look at how the padding, and border width (but not the margin) all add to size of the box. The declared width is the text area.

Some browsers do not implement the box model correctly which can cause a lot of problems. More on that later.

Last updated on October 22, 2006   by Rowland Gallop     [ Close Window  ]