Go to TopThe Box Model

The "Box Model" describes the conceptual arrangement of web page content.

All page content is thought of as being contained within a set of rectangular boxes. That's ALL content, not just the things you may think of as being a box, such as cells in a table and "generic containers", as <div> tags are known to a user of KompoZer. So, not only do these more obvious structures have all the properties of the box described below, so do headings, paragraphs, lists and the rest.

Any box has four components. In the centre is the content. This may be surrounded by a border. This border is separated from the content by padding and from the neighbouring box by a margin. Each of these three components may have a defined width from zero, which effectively removes them. Each can also be different on each of the four sides.

Box Model diagram showing Content, Padding, Border and Margin

Boxes may be one of two types, "blocks" and "in-line". Blocks fill the full width of the box in which they are contained and may be nested inside one another. Any following block will appear underneath the previous one. Examples of blocks on this page include each paragraph of text. The paragraph blocks are all nested inside a block surrounding the main area of the page, which, in turn, is nested inside a wrapper block, that stops the page width expanding indefinitely, and this is nested inside the body block which forms the overall page.

As the name implies, in-line boxes do not have to start on a new line in the way that a block does, but can surround almost any part of the page. Examples of in-line boxes are those that enclose the words "content", "border", "padding" and "margin" towards the top of the page and allow the bold styling to be applied only to those words and the boxes that contain the circular arrow graphics that provide links to the top of the page.

Styling rules can over-ride the default behaviour of a box, so that they can be switched from block to in-line or vice versa. An example is the main illustration with a white background. This has been made to display as a block, rather than an image's default in-line state.

Blocks may also be taken out of this "normal flow", by styling rules. A block may be set to "float" to left or right. The following boxes will then draw up alongside the floated box. Examples of floating boxes include the web page montage image at the top of the page (My portrait on printed copies!), which has been floated right and the menu column which is floated left within the block holding the main content of the page.

Boxes can also be "absolutely" positioned, that is fixed in relation to the edge of the window, or "relatively", fixed in relation to some other box on the page. There are no examples of these on this site. While useful for some purposes, those who do not appreciate the implications of their use, particularly on a range of window sizes, are advised to avoid their use.

Go to TopImplications for Styling Content

When you style content you may style every component of its box. If you wish to have any worthwhile and site-wide control over the appearance of the text on a page, then it is vital that you tag all text so it is contained in its own box and where possible with a specific semantic tag (heading, paragraph, list, etc). Leaving any text as "Body Text", not only loses much of the potential control you have over its styling, but you also dramatically reduces the ability of search engines to analyse the page content effectively.

Styling is generally inherited by any boxes contained within another. This starts at the very top level. Define the background colour for the <body> tag and all content on the page will have that background, unless an alternative colour is defined for a tag placed inside it. So if you want all content, except headings, to be in a sans-serif font, define the font for the <body> and your preferred alternative for each heading type that you use. There will be no need to define a font for paragraphs, lists, tables and so on, as they will appear sans-serif by virtue of the definition for the body style.

When the width of any block is set this will define the width of the content component only. The total width of the block will include any left and right padding, border and margin widths, so you need to allow for them as well. Things are not quite the same for the height...

Top and bottom margins "collapse". Where one of these top and bottom margins meet the narrower one is treated as being of zero width. So, for example, if a heading has a bottom margin set to 2em and it is followed by a paragraph with a top margin set to 1em the separation between them is controlled by the greater (2em) not the sum (3em). Padding does not collapse.

Browsers have a default stylesheet affecting all elements. Probably, most confusing aspect of styling for newcomers is the handling of collapsing vertical margins. If, as you add content and tag it, you find additional unwanted vertical spacing appearing between items on your page, it will, almost certainly, be because you have not over-ridden the browser default margins for one of the blocks in question.

There is another complication that can cause problems. Internet Explorer, especially up to Version 6, was extremely bad at rendering code to comply with the W3C box model, so code that appears to work in KompoZer and most browsers falls down when viewed in older versions of Internet Explorer. All browsers exhibit some rendering bugs but early versions of Internet Explorer are well known as being some of the worst.

Go to Top Page updated: 10 July 2010