Dynamic HTML: The Definitive Reference

Understanding Block-Level Elements

If you are a style sheet coder, you must be aware of the element containment dictated by HTML tags. If you are a page designer, however, you need to understand an entirely different kind of containment structure: block-level elements. A block-level element is a self-contained unit of content that normally begins at the starting margin of one line and ends in a way that forces the next bit of content to appear on a new line following the block. Each of the heading tags (H1, H2, etc.) is a block-level element because it stands alone on a page (unless you use DHTML positioning tricks to overlay other elements). Other common block-level elements are P, UL, OL, and LI.

A CSS-enabled browser automatically defines a set of physical features to every block-level element. By default, the values for all these features are set to zero or none, so that they don’t appear or occupy space on the page when you use simple HTML tags without style sheets. But one of the purposes of style sheets is to let you modify the values of those features to create graphical borders, adjust margin spacing, and insert padding between the content and border. In fact, those three terms—border, margin, and padding—account for about half the style sheet attributes implemented in the Version 4 browsers.

Box Pieces

You can think of the content and features of a block-level element as a box. To help you visualize the role and relative position of the features of a block-level element, ...