Full list of CSS display property values ​​with description

03.08.18 IT / CSS 10777

When coding site pages, there is often a need to change the display style of an element, for this styles correctly in CSS there is a display property. It allows you to turn an inline element into a block element and vice versa, which can be useful in different situations. In addition, a property can be used to remove an element from a page, or to give an element various other properties. Below is a complete list of display property values ​​ that can be used to control the display style of an element on a page.

At the beginning, it should be said that all values ​​are grouped into several categories:

• global values ​​ - the group contains general values;
• display-outside - values ​​from this group determine the external display type of the element;
• display-inside - values ​​determine the internal display type of the element;
• display-listitem - values ​​show the item as a list;
• display-internal - the group contains internal values ​​that can be applied to elements;
• display-box - the group contains general values ​​that can be applied to elements;
• display-legacy - values ​​from this group contain several different values ​​at once.

So, what values ​​does the display property have ? They will be listed below by group. It is important to remember that currently you should specify a single value, although the latest specifications do allow for some values ​​to be combined, this is not yet supported by all browsers. A complete list of possible values ​​will be provided with descriptions for those values ​​that are most in demand.

Group of global values ​​:

The display-outside group has the following meanings:

The display-inside group has the following meanings:

The group display-listitem has the main value list-item , the rest of the values ​​are possible combinations of other values:

The display-internal group has the following meanings:

The display-box group has the following meanings:

The display-legacy group has the following meanings:

There are also values ​​that are included in two groups at once - display-outside and display-inside :

As you can see, there are a lot of values, some of them are completely new. The values ​​ none and block are very often used. For example, you can use JavaScript to control the display of an element - hide it or show it using these two values. You may also notice the frequent use of the table-cell value for blocks, it is used so that make vertical alignment in div using another property - vertical-align : middle . It is important to understand that browsers may not support all values ​​for the display property. Most browser supported values ​​are block, inline, list-item, none . Therefore, before using this property and the selected value, you should test the value in all popular browsers.