CSS Display Types

1. block

Elements with display: block; take up the full width available and start on a new line.

div {
    display: block;
}
            

Examples: <div>, <p>, <h1>

2. inline

inline elements only take as much width as necessary and do not start on a new line.

span {
    display: inline;
}
            

Examples: <span>, <a>, <strong>

3. inline-block

Combines characteristics of both block and inline. It flows inline but respects width and height.

.button {
    display: inline-block;
    padding: 10px 20px;
}
            

4. none

Hides the element completely from the layout (no space is reserved).

.modal {
    display: none;
}
            

5. flex

Enables flexbox layout, allowing responsive alignment and spacing.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
            

Flexbox is powerful for creating responsive row/column layouts.

6. grid

Applies CSS Grid layout, useful for complex two-dimensional layouts.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
            

7. table & table-cell

Mimics the behavior of HTML tables. Useful when aligning content like a table.

.table {
    display: table;
}
.cell {
    display: table-cell;
    vertical-align: middle;
}
            

Conclusion

Mastering the display property helps you control layout and spacing. Choosing the right display type is essential for responsive, structured designs.