CSS property: display
Description
The type of box for an element.
This property, in combination with float and position, determines the type of box or boxes that are generated for an element.
Syntax
display: inline | block | inline-block | list-item | run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | <template> | none;
Values
- inline (by default)
Inline boxes.
- block
Block boxes.
- inline-block
A block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the box itself is formatted as an inline box.
- list-item
One or more block boxes and one marker box. Marker boxes are defined in the Lists module [CSS3LIST]. If the Lists module is not ready, define the position of the marker and the list-style property here? Or refer to CSS 2.1 instead?
- run-in
Either block or inline boxes, depending on context (see Run-in boxes). Properties apply to run-in boxes based on their final status (inline-level or block-level).
- compact
Either block boxes or a marker box, depending on context (see Compact boxes). Properties apply to compact boxes based on their final status.
- table
See the Tables module [CSS3TBL].
- inline-table
See the Tables module [CSS3TBL].
- table-row-group
See the Tables module [CSS3TBL].
- table-header-group
See the Tables module [CSS3TBL].
- table-footer-group
See the Tables module [CSS3TBL].
- table-row
See the Tables module [CSS3TBL].
- table-column-group
See the Tables module [CSS3TBL].
- table-column
See the Tables module [CSS3TBL].
- table-cell
See the Tables module [CSS3TBL].
- table-caption
See the Tables module [CSS3TBL].
- ruby
See the Ruby module [CSS3RUBY].
- ruby-base
See the Ruby module [CSS3RUBY].
- ruby-text
See the Ruby module [CSS3RUBY].
- ruby-base-group
See the Ruby module [CSS3RUBY].
- ruby-text-group
See the Ruby module [CSS3RUBY].
- <template>
See the Advanced Layout module [CSS3LAYOUT].
- none
This value causes an element to generate no boxes (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the display property on the descendants.
Versions
Examples
footer { display: none; }