The display property in CSS is used to define how an element is displayed on a web page. It determines the layout behavior of an element. This property controls the inner and outer display types of an element, affecting how it is rendered in the document flow and how it interacts with other elements.
property values
1. display: none
This not only hides the element but also removes it from the document flow, meaning it won’t take up any space.
Syntax:-
.container {
display: none;
}
2. display: block
The element is displayed as a block element (like <div>). It will take up the full width available and start on a new line.
Syntax:
.element-block {
display: block;
}
3. display: inline
The element is displayed as an inline element (like <span>). It will take up only as much width as necessary and will not start on a new line.
Syntax:
.inline-element{
display: inline;
}
4. display: inline-block
The element is displayed as an inline element, but it can have width and height like a block element.
Syntax:
.inline-element{
display: inline-block;
}
5. display: flex
The element is displayed as a block-level flex container. It enables the use of the flexible box layout model.
Syntax:
.flex-container{
display: flex;
}
6. display: inline-flex
The element is displayed as an inline-level flex container.
Syntax:
.flex-inline-container{
display: inline-flex;
}
7. display: grid
The element is displayed as a block-level grid container. It enables the use of the grid layout model.
Syntax:
.grid-container {
display: grid;
}
8. display: inline-grid
The element is displayed as an inline-level grid container.
Syntax:
.grid-inline-container {
display: inline-grid;
}
9. display: table
The element is displayed as a block-level table (like <table>).
Syntax:
.table-container {
display: table;
}
10. inline-table
The element is displayed as an inline-level table.
Syntax:
.table-inline-container {
display: inline-table;
}
11. table-row and table-cell
These values display the element as a table row, table cell, and so on.
Syntax:
.table-row{
display: table-row;
}
.table-cell{
display: table-cell;
}
12. display: list-item
he element is displayed as a list item (like <li>).
Syntax:
.list-item-container {
display: list-item;
}
13. display: contents
The element itself is not displayed, but its child elements are displayed as if they were direct children of the element’s parent.
Syntax:
.content-container {
display: contents;
}