Tutorial needed on CSS Box Model - I want to know the ins and outs of the CSS box model without so much detail I end up

Michael

I want to know the ins and outs of the CSS box model without so much detail I end up confused. A tutorial which is newbie friendly.

Hope someone knows of one or has their own article on this.

Brian

This isn't a tutorial, but this is a good resource explaining the box model and hence one of the reasons for the: * {margin:0; padding:0;}

CSS2 - Box model tweaking

Michael

Thank you. Will all browsers ever be equal in the way it deals with the box model?

shalom_m

Concise version

Intermediate version

All you ever will want to know about CSS Box Models (dont forget to look at part one of the article too)

Michael

Thanks for those Shalom. I have bookmarked them and will read them in full soon.

Gaz

The Holy Grail is a great read.

Brian

You gotta love A List Apart, that website is an awesome site!

bonnit

excellent links :)

designgenies

The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed:
The box model in CSS



The illustration above might seem pretty theoretical to look at, so let's try to use the model in an actual case with a headline and some text. The HTML for our example is (from the Universal Declaration of Human Rights):

<h1>Article 1:</h1>

<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>


By adding some color and font-information the example could be presented as follows:

The example contains two elements: <h1> and <p>. The box model for the two elements can be illustrated as follows:

Even though it may look a bit complicated, the illustration shows how each HTML-element is surrounded by boxes. Boxes which we can adjust using CSS.