CSS Help - CSS help Box Model Tutorial

CSS box model

In an attempt to understand CSS layout and after a great deal of css tutorials everything was made clear by the box model diagram presented by Hicks Design. I have attempted to break down this example and present it in a CSS Help style.

The diagram below helps visualise CSS positioning. For the purpose of this tutorial each element of the box model is shown as a rectangle.

CSS box model hierachy

The main content area which is shown as text is surrounded by padding, border and margins.

With CSS designers can create style sheets that define how different elements can such as headers, links, colours and fonts appear.