What is the CSS display property?

The display property in CSSCascade Style Sheets is used to specify that if the element should be displayed or not and if it is displayed then we have to specify that how it looks.

Syntax

display: value;

Property values

• none: The element does not display completely.

• block: It is used to generate a box of block-level by the element.

• flex: It is used to display the element as the block-level flex container.

• grid: It is used to display the element as the block-level grid container.

• inline: It is used to generate a box of inline-level by the element.

• contents: By using this the element does not generate any box of it’s own but it’s pseudo-elements and children elements still generate boxes as normal.

• inline-block: It is used to behave the element as the inline flow-root.

• inline-flex: It is used to behave as the inline flex.

• inline-grid: It is used to behave as the inline grid.

• inline-table: It is used to behave as the inline table.

• table: It is used to behave all the elements in the form of a <table> element.

• run-in: It is used to display the element as the block, inline depending upon the text.

• list-item: It is used to behave all the elements in the form of a <li> element.

• table-column-group: It is used to behave all the elements in the form of a <colgroup> element.

• table-caption: It is used to behave all the elements in the form of a <caption> element.

• table-header-group: It is used to behave all the elements in the form of a <thead> element.

• table-footer-group: It is used to behave all the elements in the form of a <tfoot> element.

• table-row-group: It is used to behave all the elements in the form of a <tbody> element.

• table-row: It is used to behave all the elements in the form of a <tr> element.

• table-column: It is used to behave all the elements in the form of a <col> element.

• table-cell: It is used to behave all the elements in the form of a <td> element.

• initial: This sets the value to its default value.

• inherit: This inherits property from its parent value.

Code

The following is the basic HTMLHyperText Markup Language & CSS code to demonstrate the use of the display property.

Explanation

In this example, we can see that we have implemented four different display properties to show the difference between them.

We can also change and set the property according to our own choice.