Detailed explanation
The CSS display property determines how an element participates in layout. In normal flow, block elements start on a new line, while inline and inline-block elements can sit alongside text or other inline-level elements. For form styling, this helps you decide whether labels, inputs, and buttons should stack vertically or share a row. The important distinction is between an element’s position in the surrounding flow and the sizing rules applied to its box.
A block element accepts width, height, padding, borders, and margins. With width: auto, it generally fills the available width of its containing block, after accounting for margins and other box dimensions. Giving it a smaller width does not make the next normal-flow block sit beside it. For example, label { display: block; margin-bottom: 6px; } puts a label on its own line above an input. Adjacent vertical margins between block boxes can collapse in some normal-flow situations.
A normal, non-replaced inline element, such as a span, participates in text lines and can wrap across them. Explicit width and height do not apply, and top and bottom margins do not affect layout. Vertical padding and borders can still be painted, but they do not increase the line box’s height and may overlap nearby content. However, avoid saying that every inline form control ignores dimensions: controls such as inputs have special or replaced-element sizing behaviour, and browser default styles vary.
An inline-block element is an atomic inline-level box: it flows alongside text but accepts width, height, padding, borders, and margins. For example, button { display: inline-block; width: 120px; height: 40px; margin: 0 8px; box-sizing: border-box; } creates a sized button whose declared dimensions include padding and borders. Inline-block boxes align to the baseline by default, and whitespace in HTML can create visible gaps between them. Interviewers look for these practical distinctions, awareness of form-control defaults, and recognition that flexbox is often simpler for aligning a complete form row.
Key points to remember
- Block elements start on a new line in normal flow and accept explicit dimensions.
- Normal non-replaced inline elements ignore width, height, and vertical margins.
- Inline-block elements stay in inline flow while supporting box-model dimensions.
- Inputs and other native controls have sizing behaviour that makes blanket inline rules misleading.
- Use box-sizing: border-box for predictable control sizes; account for baseline alignment and whitespace gaps.
Common mistakes candidates make
- Claiming that width and height never work on any inline element, including replaced elements and native controls.
- Assuming a block element with a small width will let the next normal-flow block appear beside it.
- Ignoring inline-block whitespace gaps and baseline alignment when sizing and aligning controls.
Likely follow-up questions
Why is there a gap between adjacent inline-block buttons?
Spaces or newlines between their HTML tags are usually rendered as whitespace in the inline formatting context. A flex container with an explicit gap provides more predictable spacing.
How can I align inline-block inputs and buttons vertically?
Apply vertical-align: middle to the inline-level controls for a simple improvement, though it does not guarantee exact geometric centring. For a row with reliably centred items, use display: flex and align-items: center on the parent.
Does a width of 120px include a button’s padding and border?
That depends on box-sizing: content-box excludes padding and borders from the declared width, while border-box includes them. Set box-sizing explicitly rather than relying on browser defaults for each control.
Interview tip: Compare flow and sizing first, demonstrate the button rule, then briefly mention native-control exceptions and alignment.