CSS display Property

The display Property

CSS display property specifies the behaviour of HTML elements. It defines how an elements is displayed on the webpage.

Syntax

display: value;

Display Property Values

effect. Default. | | block | It displays the element as a block element which starts on a new line and takes up the whole width. | | contents | It make an element disappear from the layout while keeping its child elements visible and in their

original positions within the layout. | | flex | It displays an element as a block-level flex container. | | grid | It displays an element as a block-level grid container. | | inline-block | It allows an element to flow along with other inline elements along with having block-level

characteristics such as width and height. | | inline-flex | It displays an element as an inline-level flex container. | | inline-grid | It displays an element as an inline-level grid container. | | inline-table | It displays the element as an inline-level table. | | run-in | It displays an element depending on context as either block or inline. | | table | It enables the element to behave like a <table> element. | | table-caption | It enables the element to behave like a <caption> element. | | table-column-group | It enables the element to behave like a <colgroup> element. | | table-header-group | It enables the element to behave like a <thead> element. | | table-footer-group | It enables the element to behave like a <tfoot> element. | | table-row-group | It enables the element to behave like a <tbody> element | | table-cell | It enables the element to behave like a <td> element. | | table-column | It enables the element to behave like a <col> element. | | table-row | It enables the element to behave like a <tr> element. | | none | It removes the element completely. | | initial | This sets the property to its default value. | | inherit | This inherits the property from the parent element. |

CSS display Property with inline Value

The following example illustrates the use of inline value on div elements making them appear as inline element.

Example

CSS display Property with block Value

The following example illustrates the use of block value on span elements making them appear as block element.

Example

CSS display Property with Contents Value

The following example illustrates the use of the contents value. In this example, the .child element behaves as direct child of .parent element bypassing the .wrapper element.

Example

CSS display Property with Flex Value

To set an element to be a flex container making its children (flex items) layout in a flexible and responsive way, we

use the flex value. The container uses the Flexbox layout model, which allows for easy alignment,

distribution, and ordering of items along a single axis. This is shown in the following example.

Example

CSS display Property with Grid Value

To set an element to be a grid container which uses the grid layout model, allowing for the creation of

two-dimensional layouts with rows and columns, we use the grid value. Grid items can be placed and

sized explicitly or automatically across the grid. This is shown in the following example.

Example

CSS display Property with Inline Block Value

To make an element behave like an inline-level element (allowing it to flow with text and other inline content) while

retaining block-level properties such as width and height, we use the inline-block value. This is

shown in the following example.

Example

CSS display Property with Inline Flex Property

To set an element to be an inline-level flex container making the container behaves like an inline element, flowing

with surrounding text or inline elements, while still applying Flexbox layout rules to its children, we use the inline-flex property. This is shown in the following example.

Example

CSS display Property with Inline Grid Value

To set an element to be an inline-level grid container such that it behaves like an inline element (flowing with text

and other inline content) while using the grid layout model to arrange its children, we use the inline-grid value. This is shown in the following example.

Example

CSS display Property with Run In Value

To make an element behave as a block-level element or an inline-level element depending on the context, we use the run-in value. It is intended to allow an element to “run in” with surrounding text or other

elements. This is shown in the following example.

Example

CSS display Property with list-item Value

The following example illustrates the use of list-item value on div elements making them appear as bulleted list.

Example

CSS display Property with Table Values

To create table-like layouts with CSS without using HTML table elements, we can use different displays for the table.

In the following example, some values table , table-row , table-cell and table-caption have been used.

• table: creates a container that behaves like a <table>,

• table-cell: styles elements like <td> cells,

• table-row: defines elements as rows like <tr>,

• table-caption: functions like a <caption> element, positioning captions for the table.

Example

CSS display Property with none Value

The following example illustrates the use of none value on div elements to hide the element.

Example

Supported Browsers