5.3. The display Property

Before we can move on to look at CSS positioning issues, there is one more CSS property we need to understand. It comes up infrequently, but when it does, it has a significant impact on page layout.

The display property determines how a browser displays an element—whether it treats it as a block, an inline text fragment, or something else. Although it can be assigned any of 17 legal values, browser support realities confine the list to six, only four of which are really important. For a full reference to Section B.32display, see Appendix B.

The six possible values for the display property are:

• block

• inline

• list-item

• none

• table-footer-group

• table-header-group

The default value varies from element to element. Block elements such as p, h1, and div default to block, while inline elements such as strong, code, and span default to inline. List items, quite obviously, default to list-item. Assigning non-default settings to elements (such as setting a div to display: inline) can produce some interesting effects (imagine a paragraph containing two divs and a list being displayed in the middle of a line of text).

If you supply a value of none, the element to which it applies is not shown and the space it would normally occupy is collapsed. This differentiates the display: none property-value pair from the visibility: hidden setting commonly used to hide the element but preserve the space it would occupy if it were visible.