🎯 CSS display Property

The display CSS property defines how an HTML element is rendered on the page.

It controls whether an element behaves as block, inline, grid, flex, table, or is completely hidden from the layout.

The display property is one of the most important CSS tools for building layouts and controlling page structure.

• Controls layout behavior of elements
• Enables flex and grid systems
• Helps build responsive designs
• Manages visibility and structure

The element behaves like inline content and does not start on a new line.

span {
    display: inline;
}
                

The element starts on a new line and takes full available width.

div {
    display: block;
}
                

Combines inline behavior with block features like width and height.

div {
    display: inline-block;
}
                

The element is completely removed from the layout and not visible.

div {
    display: none;
}
                

The element behaves like a list item and displays a marker.

div {
    display: list-item;
}
                

CSS can simulate table structures using display values like table, table-row, and table-cell.

• table → behaves like a table
• table-row → behaves like a row
• table-cell → behaves like a cell
• inline-table → inline table layout

Enables flexible box layout for advanced alignment and responsive design.

div {
    display: flex;
}
                

Provides a grid-based layout system for complex page structures.

div {
    display: grid;
}
                

Resets the display property to its default browser value.