xxxxxxxxxx
inline: Displays an element as an inline element (like <span>). Any height and width properties will have no effect;
block: Displays an element as a block element (like <p>). It starts on a new line and takes up the whole width;
contents: Makes the container disappear making the child elements children of the element the next level up in the DOM;
flex: Displays an element as a block-level flex container;
grid: Displays an element as a block-level grid container;
inline-block: Displays an element as an inline-level block container;
inline-flex: Displays an element as an inline-level flex container;
inline-grid: Displays an element as an inline-level grid container;
inline-table: The element is displayed as an inline-level table;
list-item: Let the element behave like a <li> element;
run-in: Displays an element as either block or inline depending on context;
table: Let the element behave like a <table> element;
table-caption: Let the element behave like a <caption> element;
table-column-group: Let the element behave like a <colgroup> element;
table-header-group: Let the element behave like a <thead> element;
table-footer-group: Let the element behave like a <tfoot> element;
table-row-group: Let the element behave like a <tbody> element;
table-cell: Let the element behave like a <td> element;
table-column: Let the element behave like a <col> element;
table-row: Let the element behave like a <tr> element;
none: The element is completely removed;
initial: Sets this property to its default value;
inherit: Inherits this property from its parent element;
xxxxxxxxxx
/* legacy values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* box generation */
display: none;
display: contents;
/* two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;
/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;
/* Global values */
display: inherit;
display: initial;
display: revert;
display: unset;
xxxxxxxxxx
The display property specifies the display behavior
(the type of rendering box) of an element. In HTML, the default display
property value is taken from the HTML specifications
or from the browser/user default style sheet.
xxxxxxxxxx
/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* box generation */
display: none;
display: contents;
/* multi-keyword syntax */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;
/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;
/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;