display
Definition
The display element overrides the default layout behavior of an element. For example, elements can be hidden, block elements can be made to render inline, or inline elements can be made to render as blocks.
The display property is often used to hide elements used to create headers, navigation menus, ads, footers, etc., in the CSS file used for printing. The link element can point to the CSS file used for printing as shown below:
<link rel="stylesheet" href="print.css" media="print" type="text/css" />
Example
#header, #footer, #nav {display: none}
Characteristics
Possible values
inline- The element renders as a rectangle that takes up only the width of its contents.
block- The element renders as a rectangle that takes up 100% of the parent element's width.
list-item- The element behaves like a li element.
run-in- The element renders as a block or inline rectangle, depending on context.
inline-block- The element renders as an inline rectangle, but content inside the element behaves as if it is inside a block element.
table- The element behaves like a table element.
inline-table- The element behaves like a table element but renders as an inline rectangle.
table-row-group- The element behaves like a tbody element.
table-header-group- The element behaves like a thead element.
table-footer-group- The element behaves like a tfoot element.
table-row- The element behaves like a tr element.
table-column-group- The element behaves like a colgroup element.
table-column- The element behaves like a col element.
table-cell- The element behaves like a td element.
table-caption- The element behaves like a caption element.
none- Hides the element and its children by removing it from the page layout.
inherit- Use the same computed value as the parent element for this property.
Default value
inline
Applies to
All elements
Inherited
No