Text follows typography, not layout. Allowing inline elements to behave like block-level boxes (controlling width/height) would break the typographic flow of a text line. CSS historically forbids this.
Why can’t inline elements have width/height, while inline-block elements can? Explain the core reason in one sentence.
Inline elements participate in the inline formatting context and do not generate block-level boxes that can take width/height, so width/height is ignored; inline-block elements generate block-level boxes (full box model), so they can have width/height while still flowing inline.
Why do inline elements’ vertical padding/margin render visually but not affect layout? Describe what happens in the browser rendering pipeline.
Inline elements do not generate boxes that participate in height calculation; their height is determined by the line box (font metrics + line-height). Vertical padding/margin is ignored in layout and only drawn in the paint phase, so it appears visually but does not expand the line height.
Why does a block element occupy its own line? Which browser layout model enforces this?
Block elements participate in the Block Formatting Context (BFC), generating block-level boxes. In BFC, block-level boxes stack vertically, and each must start on a new line, which makes them naturally take up a whole line and default to filling available width.
What are the essential differences between block, inline, and inline-block? Summarize each in one sentence.
block: Participates in BFC, generates a block-level box, occupies a full line, and defaults to full width.
inline: Participates in IFC, is part of the text flow, and does not generate a box that can take width/height.
inline-block: Generates a box-level element with full box-model capability and participates in IFC, so it can size itself and still sit inline with text.
When must you use inline-block instead of inline or block? Give a concrete component example.
When an element must appear inline with text and support full box-model sizing (width/height/padding/border). Typical examples: buttons, inputs, badges, tags, icons. Inline cannot size; block forces line breaks; inline-block is the only fit.
If you want a row of form controls (input, button, select) to sit naturally on the same line and have controllable width/height, which display should you use and why?
Use inline-block. Form controls require full box-model sizing; inline cannot size, block forces line breaks.
Why is vertical-align ineffective on block elements?
vertical-align belongs to the inline formatting context—it aligns inline/inline-block elements within the same line box (baseline, middle, text-bottom). Block elements are in BFC, have no line box or shared baseline, so vertical-align does nothing.
How does the browser determine the baseline of inline/inline-block elements, and how do ascent/descent determine line height?
The browser takes the maximum ascent and descent across all inline elements in the line, compares it with line-height, and uses the larger values to compute the line height.
Inline text takes its baseline from font metrics; an inline-block’s baseline is the bottom of its margin box (unless its content is text, in which case the text baseline is used).
Why do UI component libraries (Ant Design, Bootstrap, Material UI) use inline-block for buttons by default? Explain from the perspectives of formatting context and the box model.
inline-block = block-level box inside the inline formatting context. It provides controllable sizing (box model) while remaining inline with text, making it the optimal display choice for buttons.
Why do buttons sometimes “sink” visually? How does the inline-block baseline cause this issue? Provide at least two fixes.
Inline-block elements use the bottom of their margin box as their baseline, so they often sit lower relative to adjacent text.
Fixes include:
Use display: flex on the parent and align items via align-items: center.
Set vertical-align: middle or vertical-align: top on the inline-block element.
Convert to block-level layout (e.g., flex container) to remove baseline alignment entirely.