Broadly speaking, CSS groups elements into two types: nonreplaced and replaced. Although the types may seem rather abstract, there actually are some profound differences in how the two types of elements are presented. These differences are explored in detail in Chapter 7 of CSS: The Definitive Guide, third edition (O’Reilly).
The majority of HTML and XHTML elements are nonreplaced elements, which means
their content is presented by the user agent inside a box generated by
the element itself. For example,
there</span> is a nonreplaced element, and the text
hi there will be displayed by the
user agent. Paragraphs, headings, table cells, lists, and almost
everything else in HTML and XHTML are nonreplaced elements.
In contrast, replaced elements are those whose
content is replaced by something not directly represented by document
content. The most familiar HTML example is the
img element, which is replaced by an image
file external to the document itself. In fact,
img itself has no actual content, as we can
see by considering a simple example:
<img src="howdy.gif" alt="Hi">
There is no content contained in the element—only an element name
and attributes. Only by replacing the element’s lack of content with
content found through other means (in this case, loading an external
image specified by the
can the element have any presentation at all. Another example is the
input element, which may be replaced
with a radio button, checkbox, or text input box, depending on its type.
Replaced elements also generate boxes in their display.