The display property is one of the most important CSS properties for controlling the layout of
elements on a web page. It is used to determine how an element is displayed in the document flow. Every HTML element
has a default value of the display property, depending on the type of element. Most elements have a
default value of block or inline.
The display property allows changing the default behavior of HTML elements. A block
element ALWAYS starts on a new line and takes up the entire available width. An
inline element does NOT start on a new line and takes up only as much width as
necessary.
The CSS property display has many possible values. Let us take a look at them:
| Value | Description |
|---|---|
| Block-level Elements | |
display: block |
Block element – starts on a new line, takes full width |
display: contents |
Element creates no box; children are "lifted" to its place |
display: flex | Block flex container |
display: grid | Block grid container |
| Inline Elements | |
display: inline |
Inline element – no line break, only horizontal dimensions apply |
display: inline-block |
Inline box with width/height and margin support |
display: inline-flex | Inline flex container |
display: inline-grid | Inline grid container |
display: inline-table | Table at inline level |
| Table Elements | |
display: table | Behaves like a table (anonymous boxes for rows/cells) |
display: table-caption | Behaves like <caption> element in table |
display: table-cell | Behaves like table cell (<td>) |
display: table-column | Behaves like table column (<col>) |
display: table-column-group | Behaves like column group (<colgroup>) |
display: table-footer-group | Behaves like table footer (<tfoot>) |
display: table-header-group | Behaves like table header (<thead>) |
display: table-row | Behaves like table row (<tr>) |
display: table-row-group | Behaves like table body (<tbody>) |
| Other / Utility | |
display: inherit | Inherits value from parent element |
display: initial | Resets to default value of property |
display: list-item | Behaves like list item (with marker) |
display: none | Element is not displayed and takes no space |
