 |  |
12.5. The Display Property
Display is one of the most important CSS properties. This property determines how the element will be positioned on the page. There are 18 legal values for this property. However, the two primary values are inline and block. The display property can also be used to create lists and tables, as well as to hide elements completely.
12.5.1. Inline Elements
Setting the display to inline, the default value, places the element in the next available position from left to right, much as each word in this paragraph is positioned. (The exact direction can change for right-to-left languages like Hebrew or top-to-bottom languages like traditional Chinese.) The text may be wrapped from one line to the next if necessary, but there won't be any hard line breaks between each inline element. In Example 12-1 and 12-2, the quantity, step, person, city, and state elements were all formatted as inline. This didn't need to be specified explicitly because it's the default.
12.5.2. Block Elements
In contrast to inline elements, an element set to display: block is separated from its siblings, generally by a line break. For example, in HTML, paragraphs and headings are block elements. In Example 12-1 and 12-2, the dish, directions, and story elements were all formatted with display: block.
12.5.3. List Elements
An element whose display property is set to list-item is also formatted as a block-level element. However, a bullet is inserted at the beginning of the block. The list-style-type, list-style-image, and list-style-position properties control which character or image is used for a bullet and exactly how the list is indented. For example, this rule would format the steps as a numbered list rather than rendering them as a single paragraph:
step {
display: list-item;
list-style-type: decimal;
list-style-position: inside
}12.5.4. Hidden Elements
An element whose display property is set to none is not included in the rendered document the reader sees. It is invisible and does not occupy any space or affect the placement of other elements. For example, this style rule hides the story element completely:
story {display: none}12.5.5. Table Elements
There are ten display values that identify elements as parts of a table. These are:
These display values have the obvious meanings by analogy with HTML 4.0 table tags. Their use should be consistent with each other and with other elements in the document. For instance, an element formatted as a table-row element should have a parent element formatted as a table and child elements formatted as table-cells. For example, these three rules format the ingredients as a simple table:
ingredients { display: table }
ingredient { display: table-row }
quantity, component { display: table-cell } |  | |
| 12.4. Selectors |  | 12.6. Pixels, Points, Picas, and Other Units of Length |
Copyright © 2002 O'Reilly & Associates. All rights reserved.