Many elements in HTML generate boxes. Conceptually, a box is a rectangle on the screen that contains the element. Boxes can nest. This means that a box can be contained by another box. There are two primary kinds of boxes: block-level or inline.
A block-level box corresponds to a block-level element. For a list of these elements, please refer to http://www.htmlhelp.com/reference/html40/block.html. Yes, there is a large number of these elements! A block-level box is characterized by the box being defined by a single rectangle (hence a “block”).
An inline box corresponds to an inline element, visit http://www.htmlhelp.com/reference/html40/inline.html for a list of such elements. An inline box is characterized by the fact that it can “wrap around” the boundaries of an enclosing block-level box.
Is this confusing? Let’s use an example in listing 1. In this example, line 1 specifies the beginning of a paragraph <P> element. A Paragraph element is a block-level element. However, inside this block-level element is an inline element. Line 2 is a <strong> element that is embedded within the paragraph. Depending on the formatting and screen size, the text of the <strong> element may wrap around the boundaries of the <p> element.
| Listing 1: | blockvsinline |
In this module, we are more concerned about block-level boxes because they are more frequently used for page layout purposes.