CSS2 » Properties » display
Version: Level 1/Expanded in Level 2
Compability: IE4+ N4+
Most of the Level 2 additions are currently not supported by any browser.
- Syntax:
- display : block | compact | inline | inline-table | list-item | marker | none |run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
- table-row-group (Level 2)
- The table-row-group value displays the element as if it were a group of table rows.
- table-row (Level 2)
- The table-row value displays the element as if it were a table row.
- table-header-group (Level 2)
- The table-header-group value displays the element as if it were a group of table headers.
- table-footer-group (Level 2)
- The table-footer-group value displays the element as if it were a group of table footers.
- table-column-group (Level 2)
- The table-column-group value displays the element as if it were a group of table columns.
- table-column (Level 2)
- The table-column value displays the element as if it were a table column.
- table-cell (Level 2)
- The table-cell value displays the element as if it were a table cell.
- table-caption (Level 2)
- The table-caption value displays the element as if it were a table caption.
- table (Level 2)
- The table value displays the element as if it were a block-level table.
- run-in (Level 2)
- The run-in value assigns the element to be block-level or inline based upon the context.
- none (Level 1)
- The none value prevents the display of the element.
- marker (Level 2)
- The marker value assigns the content, before or after a box element, to be a marker. It is used with the :after and :before pseudo-elements.
- list-item (Level 1)
- The list-item value treats the element to be displayed as a list. Each item in the list can be preceded by an optional marker, such as the solid black circle,
- associated with the HTML tag.< li >
- inline-table (Level 2)
- The inline-table value displays a table as an inline element, or inline box, that does not have a line break before or after the table.
- inline (Level 1)
- The inline value treats the element to be displayed as an inline element, or inline box, that does not have a line break before or after the element. In other words, everything is displayed on the same line.
- compact (Level 2)
- The compact value assigns the element to be block-level or inline based upon the context.
- block (Level 1)
- The block value is the default. It treats the element to be displayed as a block-level element, or block-level box, that has a line break before and after the element.
The display property controls if or how an element will be displayed. This property is not inherited.
Examples
Code:
p { display: block; }
img { display: inline; }
li { display: list-item; }
img { display: none; }Language(s): CSS2
Code:
<img src="/images/guru.gif" style="display: inline;">
<img src="/images/guru.gif" style="display: none;">
<img src="/images/guru.gif" style="display: inline;">Output:
Explanation:
In this example, the second image is not displayed.
Language(s): CSS2
See Also:
