What is the Display Property in CSS?
Learn how the CSS display property works, including block, inline, flex, grid, and none, and how it differs from visibility and opacity for hiding content.
Expected Interview Answer
The CSS display property determines the type of box an element generates and how it participates in layout — for example block, inline, inline-block, flex, grid, or none — controlling both an element's own box behavior and the formatting context it creates for its children.
display: block, inline, and inline-block control the element's own outer box type (whether it starts a new line, flows with text, or hybridizes both), while display: flex and display: grid go further by turning the element into a container that establishes a whole new layout mode — flex or grid formatting context — for its direct children. display: none removes the element from the render tree entirely, taking up no space and being inaccessible to assistive technology, which differs from visibility: hidden (still takes up space, hidden visually) and opacity: 0 (still takes up space and is interactive). Modern CSS also splits display into two values conceptually (outer and inner, e.g. display: inline flex), and display: contents removes an element's own box while still rendering its children as if the parent weren't there. Getting display right is foundational since it's the single property that decides which entire layout algorithm (normal flow, flex, grid, table) governs an element's children.
- Single property that switches an element's whole layout algorithm
- display: none fully removes content from layout and accessibility tree
- Distinguishes outer box behavior (block/inline) from layout mode (flex/grid)
- Underpins every modern CSS layout technique (Flexbox, Grid)
- Clarifies the difference from visibility and opacity for hiding content
AI Mentor Explanation
The display property is like choosing the format of a match — Test, ODI, or T20 — deciding the entire rule set the players follow, not just where they stand. Block sets up a sequential single-innings format, flex opens a format where fielders redistribute freely along one line, and none is the match being abandoned entirely, no scorecard at all.
Step-by-Step Explanation
Step 1
Set the outer box type
display: block, inline, or inline-block determines whether the element breaks the line, flows inline, or hybridizes both.
Step 2
Switch to a layout mode when needed
display: flex or display: grid turns the element into a container establishing a new formatting context for its direct children.
Step 3
Remove content entirely with none
display: none takes the element out of the render tree completely — no space reserved, not exposed to assistive technology.
Step 4
Distinguish from visibility and opacity
visibility: hidden and opacity: 0 still occupy layout space; only display: none removes the space and the accessibility node.
Step 5
Use display: contents for wrapper-less children
It removes the element's own box while still rendering its children as if the wrapper weren't there, useful for grid/flex item promotion.
Step 6
Know the two-value modern syntax
display: inline flex or display: block grid separate outer display type from inner layout mode explicitly.
What Interviewer Expects
- Names the common display values: block, inline, inline-block, flex, grid, none
- Explains display: none removes the element from layout and accessibility tree
- Distinguishes display: none from visibility: hidden and opacity: 0
- Understands flex/grid create a new formatting context for children
- Knows display: contents and its use case (bonus depth)
Common Mistakes
- Confusing display: none with visibility: hidden
- Forgetting display: none content is unreachable by screen readers, unlike visibility: hidden's differing implications
- Thinking display only affects the element itself, not its children's layout mode
- Using display: none for elements that should merely be visually hidden but still take space
- Not knowing display: flex/grid changes children's formatting context, not just the parent's box type
Best Answer (HR Friendly)
“The display property decides how an element behaves on the page: whether it's a block, sits inline with text, or becomes a flexible or grid-based container for other elements. It's also how you completely hide something with display: none, removing it from the page entirely rather than just making it invisible.”
Code Example
.block-box { display: block; }
.inline-text { display: inline; }
.hybrid-btn { display: inline-block; }
.flex-row { display: flex; }
.grid-layout { display: grid; }
.hidden { display: none; } /* removed from layout and a11y tree */.gone {
display: none; /* no space reserved, not read by screen readers */
}
.invisible {
visibility: hidden; /* space still reserved, layout unaffected */
}Follow-up Questions
- What's the difference between display: none and visibility: hidden?
- How does display: flex change the formatting context for child elements?
- What does display: contents do and when would you use it?
- How does the two-value display syntax (e.g. inline flex) work?
- Why is display: none problematic for accessibility if used to hide interactive content permanently?
MCQ Practice
1. What does display: none do to an element?
display: none removes the element completely from the render tree — no space is reserved and it's inaccessible to assistive technology.
2. Which display value turns an element's direct children into flex items?
display: flex establishes a flex formatting context, making the element's direct children flex items.
3. Which property, unlike display: none, still reserves the element's layout space when hiding it?
visibility: hidden hides the element visually but keeps its space reserved in the layout, unlike display: none which removes it entirely.
Flash Cards
What does the display property control? — The type of box an element generates (block/inline/etc.) and the layout mode it establishes for its children (flex/grid/etc.).
Does display: none reserve layout space? — No — it removes the element from the render tree entirely, unlike visibility: hidden.
What formatting context does display: grid create? — A grid formatting context for the element's direct children, enabling two-dimensional row/column layout.
What does display: contents do? — Removes the element's own box while still rendering its children as if the wrapper element weren't there.