Display

The display property specifies the type of box an element should generate.

Value Description
blockDisplays an element as if it were a block level element like a paragraph or heading.
flexDisplays an element as a block-level flex container.
gridDisplays an element as a block-level grid container.
inlineDisplays an element if it were an inline element like a link or an image.
inline-blockDisplays an element with all the properties of a block-level element apart from displaying inline with other content (rather than having a row of it's own).
inline-flexDisplays an element as an inline-level flex container.
inline-gridDisplays an element as an inline-level grid container.
inline-tableThe element is displayed as an inline-level table.
list-itemThe element behaves like a list item element.
run-inDisplays an element as either block or inline, depending on context.
tableThe element behaves like a table element.
table-captionThe element behaves like a caption element.
table-column-groupThe element behaves like a column group element.
table-header-groupThe element behaves like a table head element.
table-footer-groupThe element behaves like a table foot element.
table-row-groupThe element behaves like a tbody element.
table-cellThe element behaves like a td element (useful if you want vertical align to work as expected).
table-columnThe element behaves like a table column element.
table-rowThe element behaves like a table row element.
noneThe element doesn't appear on the page at all. This is different from setting the visibility property to 'hidden' whereby the hidden element still takes up space on the page (it's just invisible).

Themeover CSS Reference

Close