Eqsash
Sign in Registration
СтатьиСкачатьСервисыАудиоВидеоКонтакты
ruen
Home > Articles > Full list of CSS display property values ​​with description

Full list of CSS display property values ​​with description

03.08.18 IT / CSS 11200

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.

    ← CSS properties for working with text in HTML, changing the font size and more
    How to align an element with the CSS text-align property →
    Comments (0)
    For commenting sign in or register.
    Оставить заявку

    Последние статьи

    Смотреть все статьи

    Популярные разделы

    Eqsash (Инструменты)

    Приложение для Android - VK LAST USER ID, отучитель от зависимости и т.д.:
    Скачать APK

    Amessage (Общение)

    Вход в веб-версию
    Приложение для Android:
    Скачать APK

    Поделиться

    Подписаться

    YouTube

    Книги

    IT-заметки - Простым языком о самом нужном (HTML, CSS, JavaScript, PHP, базы данных, Drupal, Битрикс, SEO, домены, безопасность и другое), PDF, 500 стр.
    To support Terms of use
    © 2018-2025 Eqsash
    18+ By using this site, you accept the user agreement and agree to the processing of Cookies. Cancellation of transactions and refund of donations are not possible. All rights reserved, use of materials only with the consent of the copyright holder.