Sign in Registration
ruen

Full list of CSS display property values ​​with description

css-display-values

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 ​​:

  • inherit - inherit the parent value;
  • initial - used to set the initial value of the property;
  • unset is a combination of the keywords initial and inherit .
  • The display-outside group has the following meanings:

  • block - makes an element block;
  • inline - makes the element inline;
  • run-in - makes an element block or inline, depending on the context.
  • The display-inside group has the following meanings:

  • flow - the element outputs its content using flow layout;
  • flow-root - the element outputs its content using the root flow layout;
  • table - turns an element into a table;
  • flex - the element behaves like a block element and renders its content in a flexible manner;
  • grid - the element behaves like a block element and renders its content as a grid;
  • ruby ​​ - designed to add a small annotation above or below the given text, similar to the ruby ​​ tag;
  • subgrid - if the parent element is grid , the element itself and its contents are shown as a grid.
  • The group display-listitem has the main value list-item , the rest of the values ​​are possible combinations of other values:

  • list-item - makes the item block and adds list markers;
  • list-item block ;
  • list-item inline ;
  • list-item flow ;
  • list-item flow-root ;
  • list-item block flow ;
  • list-item block flow-root ;
  • flow list-item block .
  • The display-internal group has the following meanings:

  • table-row-group - makes a structural block, which consists of several table rows, works similarly to the tbody tag;
  • table-header-group - makes an element a container for storing one or more rows of cells presented at the top of the table, similar to the thead tag;
  • table-footer-group - used to store one or more rows of cells displayed at the very bottom of the table, similar to the tfoot tag;
  • table-row - makes the element a table row, similar to using the tr tag;
  • table-cell - displays the element as a table cell;
  • table-column-group - makes an element a group of one or more table columns, similar to the colgroup tag;
  • table-column - makes the element a table column, similar to the col tag;
  • table-caption - sets the caption for the table, similar to the caption tag;
  • ruby-base ;
  • ruby-text ;
  • ruby-base-container ;
  • ruby-text-container .
  • The display-box group has the following meanings:

  • contents - allows you to add content for the element;
  • none - hides an element on the page, and the space it occupies disappears.
  • The display-legacy group has the following meanings:

  • inline-block - the element becomes both inline and block at the same time;
  • inline-table - turns an element into a table that behaves like an inline element;
  • inline-flex ;
  • inline-grid .
  • There are also values ​​that are included in two groups at once - display-outside and display-inside :

  • block flow ;
  • inline table ;
  • flex run-in .
  • 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.

    Comments (0)
    For commenting sign in or register.