
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
-