HTML & CSS Interview Question #76

What does the CSS display property do?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

The display property controls how an element generates boxes and participates in layout. Common values include block, inline, inline-block, flex, grid, and none.

Detailed Explanation

The display property controls how an element generates boxes and participates in layout. Common values include block, inline, inline-block, flex, grid, and none.

Choosing the correct display mode is fundamental to layout. For example, display: flex creates a flex formatting context for direct children, while display: grid creates a grid formatting context. display: none removes the element from layout and normally from the accessibility tree.

Code Example

.card { display: block; }
.badge { display: inline-block; }
.toolbar { display: flex; }
.dashboard { display: grid; }
.hidden { display: none; }