Skip to main content

Getting StartED with CSS

Display and Visibility Properties

These properties change the way elements are displayed. See Chapter 8 for the main description of how they work. The table-related display properties are discussed in Chapter 11 (see also Chapter 9 for detailed coverage of CSS and tables).

display

Accepted values:
inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none
Default:
inline
Inherited:
No

Changes the default display of an element, e.g., turns an inline element into a block-level one and vice versa.

The only values fully supported by all browsers in current widespread use are block, inline, and none. IE6 and IE7 offer support for inline-block when applied to elements that are normally displayed inline.

Examples:

IE8 and Opera are the only mainstream browsers that support run-in correctly.

The table-related values are not supported by IE6 and IE7. All other browsers in widespread use support them, but with some minor inconsistencies in Safari 3.

overflow

Accepted values:
visible, hidden, scroll, auto
Default:
visible
Inherited:
No

Controls the display of content that is too big to fit into a fixed-size container in the following ways:

Setting overflow to hidden or auto can also be used to extend the background of an element to clear any floated elements nested inside, as described in Chapter 6. Example

visibility

Accepted values:
visible, hidden, collapse
Default:
visible
Inherited:
Yes

Controls the visibility of an element, but does not remove it from the flow of the document. Used mainly in conjunction with JavaScript dynamic effects.

If visibility is set to hidden, the browser leaves a space where the element would normally have been. Example

To remove an element entirely from the page layout, use display and set its value to none. Example

The collapse value is used only with table columns. When the visibility of a table column is set to collapse, the browser should hide it, and reduce the width of the table by the same width. Currently, IE8 is the only browser that supports this correctly. Example