What is the CSS `display` property and can you give a few examples of its use?
Topics
CSS
Edit on GitHub
The common values for the display property: none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item.
display Value | Description |
|---|---|
none | Does not display an element (the element no longer affects the layout of the document). All child element are also no longer displayed. The document is rendered as if the element did not exist in the document tree. |
block | The element consumes the whole line in the block direction (which is usually horizontal). |
inline | Elements can be laid out beside each other. |
inline-block | Similar to inline, but allows some block properties like setting width and height. |
flex | Behaves as a block-level flex container, which can be manipulated using flexbox model. |
grid | Behaves as a block-level grid container using grid layout. |
table | Behaves like the <table> element. |
table-row | Behaves like the <tr> element. |
table-cell | Behaves like the <td> element. |
list-item | Behaves like a <li> element which allows it to define list-style-type and list-style-position. |
For a complete list of values for the display property, refer to CSS Display | MDN.