Enjoy 20% off all plans by following us on social media. Check out other promotions!
Quiz Questions

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 ValueDescription
noneDoes 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.
blockThe element consumes the whole line in the block direction (which is usually horizontal).
inlineElements can be laid out beside each other.
inline-blockSimilar to inline, but allows some block properties like setting width and height.
flexBehaves as a block-level flex container, which can be manipulated using flexbox model.
gridBehaves as a block-level grid container using grid layout.
tableBehaves like the <table> element.
table-rowBehaves like the <tr> element.
table-cellBehaves like the <td> element.
list-itemBehaves 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.

References

Edit on GitHub