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 (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 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.