This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.

A set of CSS box model examples

Table of contents

Disclaimer

During research and work to create this article, I did find that there was no way available to design a correct stylesheet that would give an acceptable rendering of my box model experiments in any released version of the Netscape series 4.xx browsers.

In fact, NS4.xx crashes on what is verified to be a correct, and required, CSS suggestion for the following experiments, so I have deliberately decided to exclude NS4.xx from using the specific experimental stylesheet altogether by using the MEDIA attribute set to a value of "screen, projection" , in effect making good use of another bug in the NS4.xx family.

As the saying goes, There's nothing bad that does not carry a fraction of good in itself. It turns out that anyone who wants to see how the box model experiments renders in non style aware browsers, can in fact use the NS4.xx browser for that purpose, given a situation where Lynx, or any of the older generation browsers may be missing on the rendering system at hand.

Introduction to the CSS box model

At the very heart of a Cascading Style Sheet governed presentation of an HTML document, you will find the CSS box rendering model.

As it has been laid out in the CSS1 specification, the process of designing a stylesheet resembles the old time process of making a layout of material to be printed in a lead based printing press. The sole difference being that while a printing press is working towards a fixed size medium, the CSS box model has been defined to make scalability onto different sized medias fully possible.

What the CSS1 specs says about boxes

At the very core of CSS we can find that it's based on a principle of render content in boxes within boxes within boxes within … almost » ad infinitum »

Reference to the CSS1 specification

A piece of text from the CSS1 recommendation section 5.5 Box properties

The box properties set the size, circumference and position of the boxes that represent elements. See the formatting model ( CSS1 section 4 ) for examples on how to use the box properties.

The margin properties set the margin of an element. The 'margin' property sets the border for all four sides while the other margin properties only set their respective side.

The padding properties describe how much space to insert between the border and the content (e.g., text or image). The 'padding' property sets the padding for all four sides while the other padding properties only set their respective side.

The border properties set the borders of an element. Each element has four borders, one on each side, that are defined by their width, color and style.

The 'width' and 'height' properties set the size of the box, and the 'float' and 'clear' properties can alter the position of elements.
» » »

There is one thing in particular that can lead totally astray in that text. It does in fact say in the last sentence, that the width and height properties set the size of the box and from that it's very easy to think that these properties refers to the total outside dimension of the final box construct.

That is not so, and it's better described in section 4 on the formatting model. Instead the width property, when used to suggest width in a CSS box rule, refers to the width of the content inside the box .

So the final width of a CSS box comes out as the total sum of values assigned for the properties …
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right.

I stepped straight into this trap on my first attempts at using the CSS box layout technique. Save some time and trouble and go on to read the fine print of the specs to find out that, for presentation in fully compliant browsers, the CSS box layout technique does open the gates to a first level of true typography on the web.

There's a specific stylesheet designed for the experimental pages that follows, to be used as additional input in parallel with the source code of the example pages, to develop a full understanding on how to set up CSS box rendering suggestions.

The experiments

Layer experiment 1

Layer experiment 2

Layer experiment 3a

Layer experiment 3b

Layer experiment 3c

Layer experiment 3d

Layer experiment 4a

Layer experiment 4b

Layer experiment 4c

Layer experiment 4d

-

Jan Roland Eriksson