The Display Property

The Display Property Just as every element has a position property, every element also has a display property. Although there are quite a number of display property values, the most commonly used elements have a default display property value of either block or inline. (Most of the other display values relate to tables.) The difference between block and inline is simple: Block elements, such as paragraphs, headings, and lists, sit one above another when displayed in the browser. Inline elements such as a, span, and img, sit side by side when they are displayed in the browser and only appear on a new line if there is insufficient room on the previous one. The ability to change block elements to inline elements, and vice versa, is a powerful capability that allows you, for example, to transform a row of links that normally sit next to each other into a vertical stack that you can use as sidebar navigation (with no br elements required); more on this particular trick when we look at styling lists later in the book. One other value for display worth mentioning here is none. When an element's display property is set to none, that element, and any elements nested inside it, is switched off and is not visible on the page. Any space that was occupied by the element is removed; it's as if the related markup did not exist. (This contrasts with the visibility property, which simply has the values visible or hidden. If an element's visibility is set to hidden, the element is hidden but the space it occupies remains.) Later, you'll learn how to toggle the display property of elements between none and another value to enable functionality such as drop-down menus. JavaScript can also toggle this property to cause elements to appear or disappear when defined user actions occur. Now let's put the information you have learned in this chapter to work and start creating entirely CSS-based layouts.