Using the Display Property

Each HTML element has a default value for the display property, but the value can be changed in your style sheet to achieve different effects. An inline element can be "block," a block-level element can be "inline."

For example, instead of placing LI elements in separate blocks below each other with the list-item value, you could string them together in a running sentence and separate them by commas or semicolons. You would do this using the value inline.

Figure 6.3 (a) shows a typical UL list. The UL has its LIs set to list-item. The labels (bullets) are set via the list-style property, which is discussed in the next section.

Figure 6.3. Using list-item (a) and inline (b) to format lists.

Figure 6.3 (b) shows the same list, but now with all items following each other on the line so-called "inline." In this case, the LI elements have the value inline and there are no labels.

In another example, you can change the IMG element, which is normally inline, to become a block-level element. Figure 6.4 (a) shows a paragraph with an inline image in it. In Figure 6.4 (b), the IMG element has been set to be block-level and the image takes up a line of its own.

Figure 6.4. (a) An image with the value inline; (b) an image with the value block.