Setting an Element Box Type

The display property provides a way for you to change the type of box for an element, which changes the way that an element is laid out on the page. In Part II of this book, you will have noticed that some of the elements have a style convention that includes a value for the display property. Many elements use the default value, inline, but some specify other values. The set of allowed values for the display property are described in Table 20-9.

These values cause a lot of confusion, and they have a profound effect on the layout of your documents. I explain each kind of box type in the sections that follow.

Understanding Block-Level Elements

When you use the block value, you create a block-level element. This is an element that is vertically distinct from those that surround it. You would usually achieve this effect by placing a line break before and after the element, creating a sense of separation between the element and its surroundings, much like a paragraph appears in a book. The p element, which denotes a paragraph, includes the block value for the display property in its default style convention, but you may apply this value to any element, as shown in Listing 20-9.