25 lines
1.5 KiB
Plaintext
25 lines
1.5 KiB
Plaintext
---
|
|
title: What is the CSS `display` property and can you give a few examples of its use?
|
|
---
|
|
|
|
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](https://developer.mozilla.org/en-US/docs/Web/CSS/display).
|
|
|
|
## References
|
|
|
|
- [CSS Display | MDN](https://developer.mozilla.org/docs/Web/CSS/display)
|