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