CSS · Layout and visual systems
What does the display property do?
Short answer
display sets an element's outer and inner display behaviour, which determines how it participates in layout and how its children are laid out. Common values include block, inline, inline-block, flex, grid and none.
Modern display has two parts: how the box behaves externally, and how its contents are formatted internally. block flex means the element is a block-level box on the outside and a flex container on the inside. The single-keyword values such as flex are shorthands.
.inline { display: inline; }
.block { display: block; }
.flex { display: flex; }
.hidden { display: none; }What the common values mean
- inline flows with text; width and height do not apply directly
- block starts on a new line and fills the available inline space
- inline-block flows inline but accepts width, height and vertical margins
- flex and grid create formatting contexts with their own layout rules
- contents removes the element's box while keeping its children in the parent layout
- none removes the element and its subtree from layout and the accessibility tree
Changing display changes the formatting context. That is why a margin might suddenly collapse or stop collapsing, and why a flex item's children behave differently from block children.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between display: none and visibility: hidden?
- 2What does display: contents do?
- 3Why does width not apply to inline elements?
- 4What is the difference between inline and inline-block?
Say it in the interview
Display controls both how an element participates in its parent's layout and how it lays out its children. Block, inline and inline-block describe the outer behaviour, while flex and grid create internal formatting contexts. Display none removes the element from layout and accessibility, unlike visibility hidden, which keeps its space. Changing display can change how margins and children behave.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.