The CSS display property is the most important property of CSS, which defines the type of rendering box to use for an element. It specifies how the element is displayed. Every element has a default display value.
Following are the CSS display property values:
- inline: It is used to displays an element as an inline-level.
- block: It is used to displays an element as a block element.
- flex: It is used to set an element as a block-level flex container.
- grid: It is used to set an element as a block-level grid container.
- inline-block: It is used to display an element as an inline-level block container.
- inline-flex: It is used to set an element as an inline-level flex container.
- inline-grid: It is used to display an element as an inline-level grid container.
- inline-table: This is used to display an inline-level table.
- list-item: It is used to display all the elements in <li> element.
- run-in: It is used to display an element inline or block level, depending on the context.
- table: It is used to set the behavior as <table> for all elements.
- table-caption: It is used to set the behavior as <caption> for all elements.
- table-column-group: It is used to set the behavior as <column> for all elements.
- table-row-group: It is used to set the behavior as <row> for all elements.
- table-cell: It is used to set the behavior as <td> for all elements.
- table-column: It is used to set the behavior as <col> for all elements.
- table-row: It is used to set the behavior as <tr> for all elements.
- none: It is used to remove the element.
- initial: It is used to set the default value.
- inherit: It is used to inherit the property from its parent's elements.
CSS display inline
The inline element takes the width only that they want. It does not break the line. The inline elements are: <span>, <i>, <b> etc.
CSS display block
The CSS display block element takes the full available width. It breaks the line before and after them. The block-level elements are <p>, <div>, <h1>, etc.
CSS display inline-block
The CSS display inline-block element is very similar to the inline element but the difference is that you are able to set the width and height.
CSS display none
The display: none; property is used to hide or show the elements. It hides an element without taking out any space.
This property is commonly used with JavaScript.
Difference between display: none; and visibility: hidden; property
By using display: none property, you can hide an element and the page will be displayed as if the element is not there.
And by using visibility: hidden property, you can hide an element but the element will still take the space as before.