Detailed explanation
The CSS display property controls how an element generates layout boxes and how its children are arranged. It affects layout, not the element’s HTML meaning: changing a div to display: inline does not turn it into a span. For a beginner interview, explain block, inline, inline-block, and none first, then mention flex and grid. Interviewers usually check whether you understand line breaks, sizing, and the difference between removing an element’s box and merely hiding its content.
A block box starts on a new line in normal flow. With width: auto, it generally uses the available width of its containing block; it does not always occupy the full screen. You can set its width, height, padding, and margins. Elements such as div and p are block-level by default in browser styles. An inline box flows alongside text and can wrap across lines. For ordinary non-replaced inline elements such as span and a, width and height do not apply. Horizontal margins and padding affect spacing, but vertical margins do not; vertical padding can paint outside the line without increasing its height. Replaced elements such as images are an important sizing exception.
An inline-block box participates in inline flow while accepting width and height. It stays together as one box rather than breaking across lines like inline text, and its contents use block-style internal layout. For example, span { display: inline-block; width: 100px; height: 40px; } creates a sized span that can sit beside text. Margins apply, and whitespace between inline-block elements can create visible gaps. By contrast, .hidden { display: none; } generates no layout boxes for the element or its descendants. The element remains in the DOM but takes no space and is normally excluded from the accessibility tree.
Other useful values include flex and grid, which establish flexbox and grid layouts for children. Their inline-flex and inline-grid variants participate in inline flow externally. display: contents omits the element’s own box while allowing its children to participate in layout, although accessibility behaviour needs testing. Conceptually, display combines an outer participation mode with an inner layout mode; this explains why flex controls both a container’s placement and its children’s arrangement.
Key points to remember
- block starts on a new line in normal flow; auto width generally uses the available container width.
- inline flows with text; width and height do not apply to ordinary non-replaced inline elements.
- inline-block flows inline as a single box while accepting explicit dimensions and margins.
- none removes the element and its descendants from layout, but not from the DOM.
- flex and grid arrange children; inline-flex and inline-grid provide inline-level containers.
Common mistakes candidates make
- Saying a block element always fills the screen, even when it has an explicit width or a narrower container.
- Claiming all inline elements ignore dimensions, without recognising replaced elements such as images.
- Confusing display: none with visibility: hidden, which normally preserves layout space.
Likely follow-up questions
How do display: none, visibility: hidden, and opacity: 0 differ?
display: none removes layout boxes, while visibility: hidden hides the element but preserves its space. opacity: 0 makes it transparent while preserving layout; it can still receive pointer events and keyboard focus.
What is the difference between inline-block and inline-flex?
Both participate in inline flow and accept explicit dimensions. inline-block uses block-style internal layout, whereas inline-flex makes its direct in-flow children flex items.
Why is there a gap between adjacent inline-block elements?
Whitespace in the HTML between inline-block elements is rendered like spacing between words. For a row of components, using flexbox with an explicit gap usually gives clearer spacing control.
Interview tip: Compare the four core values using line breaks, dimensions, and layout space, then demonstrate the sized inline-block span.