Boxing with CSS, Part I: The Theory - HTML with Style | WebReference

Boxing with CSS, Part I: The Theory - HTML with Style

Front Page12345

Boxing with CSS, Part I: The Theory

Forward he cried from the rear
and the front rank died
And the General sat, and the lines on the map
moved from side to side

- Pink Floyd, Us and Them

War is ugly. Take, for instance, World War I, which ended eighty years ago around this time of year. The highlight of the conflict consisted of untold numbers of men killed over a borderline that moved on an average pace of a few inches a year in a random direction, while historians are still arguing about why the whole business ever happened in the first place. Generally speaking, not one of humankind's brightest moments.

So, generally speaking, there are far worse things in the world than the CSS visual formatting model, which also concerns itself with lines moving, albeit not an a map.

The CSS visual formatting model is a way of laying out documents on visual media (such as a computer screen or a printed page). By all accounts, it is a very simple formatting model, and the publishing world has seen much more complicated ones. Still, it is not something that is simple to explain or grasp in a few words.

Various CSS properties are used to control how a document will appear in the context of this formatting model. You have seen most of them in the examples used so far, but I haven't explained their usage because I have to explain the formatting model first.

As I said, the formatting model is a pretty complicated affair. As if that wasn't enough, though, the implementations that exist, most notably in Microsoft Internet Explorer and Netscape Navigator, are respectably problematic and horrible. Explorer does a pretty good job of sticking to the model, and will behave sensibly with a few exceptions that can be dealt with simply. Navigator, on the other hand, has its own concept of what the various properties should do.

Instead of going through the theory and observing the bugs in Explorer and Navigator along the way, as I have done in the tutorials so far, I will explain the theory, that is how the CSS specification explains formatting should be done, in this tutorial, and deal with the implementations in the next one. I hope this makes the whole process easier to understand.

Contents of this TutorialPage
Dissecting a Box1
Displaying a Box1
2.What Boxes Do when they Come Together2
Where Little Boxes Come From2
Containing blocks2
3.When Boxes Have Little Boxes of their Own3
4.The Margin and Padding Properties4
Margin Properties4
Padding Properties4
The margin and padding shorthand properties4
5.Background Properties5

Front Page12345

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

Created: Nov 18, 1998
Revised: Nov 18, 1998