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