| 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. 13.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 Examples Example 13-1 and Example 13-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. 13.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 Examples Example 13-1 and Example 13-2, the dish , directions , and story elements were all formatted with display:block . CSS 2.1 adds an inline-block value that formats the element's contents as if it were a block-level element, but formats the element itself as if it were an inline element. This normally just means there's extra margins and padding around the element's content, but no line breaks before or after it. 13.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 }
13.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}
13.5.5 Table Elements There are 10 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 }
| 