The Box model

Posted February 24 2008, tagged webdev,

EDIT: This is one of the pages, I've removed since moving to a new platform.  Let me now if you want to see it back up

The box model is the what is at the heart of laying up pages using CSS/XHTML. Each item (text, links, images etc) on the page, can be seen to be surrounded by a series of items that make up the box-model. These are padding, border and margin.

This image shows you an example of the box model.  

The structure of a page is controlled by manipulating this box-model. Do you want to add a bit more spacing between two images? Then increase the margin between them. Do you think that a box should have a line around it? Then add a border.

The control of each of the items can be done on an edge by edge basis, you can have a different margin for the top, right, bottom and left.

A jump made (if used to table-based layout), is that the box-model is similar to a table cell. This is a reasonable link to make, but their are several key differences. Their is no ‘table’ structure per-say, and more importantly their is no grid/matrix to hack. That’s right, no more having to think of column spans, or throwing in another nested table to make the design look like your mock-up.

Each item (with a box-model) will try to shuffle next to its kin unless commanded otherwise. We as developers have control over this (I’ll leave for another tutorial), but it essentially boils down to manipulating the alignment of each item (floats).

Try this demonstration to see for yourself how adjusting various items to do with the box model can effect your layouts. The options, only have control over the central item.

comments powered by Disqus