What is the difference between display block, inline, and inline-block?
Learn the difference between CSS display block, inline, and inline-block: line breaks, width/height, spacing, and when to use each with clear examples.
Expected Interview Answer
block elements start on a new line and take the full available width, inline elements flow within a line and only take the width of their content, and inline-block elements flow inline like text yet accept width, height, and vertical padding/margin like a block.
A block element (like div or p) forces line breaks before and after and lets you set width, height, and all margins. An inline element (like span or a) sits inside the text flow, ignores width and height, and only respects horizontal padding and margin while vertical spacing does not push surrounding lines. inline-block is the hybrid: it stays on the same line as neighbouring inline content but behaves like a block internally, honouring width, height, and full box-model spacing.
- block gives full-width sectioning and stacking
- inline keeps content flowing within text
- inline-block combines inline flow with box sizing
- Clearer control over spacing and alignment
- Foundation for understanding modern flex/grid layouts
AI Mentor Explanation
A block element is like a full over that occupies its own slot in the innings, forcing a clear break before the next over begins and spanning the whole allotment. An inline element is like individual runs scored within an over, flowing one after another without starting a new line. inline-block is like a strategic timeout: it sits within the flow of play yet claims a defined, sized space of its own before the game continues.
Step-by-Step Explanation
Step 1
Identify the default display
Check whether the element is naturally block (div, p, section) or inline (span, a, strong) to know its starting behavior.
Step 2
Decide on line-breaking
Use block when the element must occupy its own line; use inline or inline-block to keep it flowing within text.
Step 3
Determine sizing needs
If you need explicit width and height, choose block or inline-block; plain inline ignores those dimensions.
Step 4
Check spacing behavior
Remember vertical margin and padding do not affect surrounding lines on inline elements, but they do on inline-block and block.
Step 5
Apply the display value
Set display: block, inline, or inline-block in CSS to override the element's default when the layout requires it.
What Interviewer Expects
- Clear description of line-breaking behavior for each value
- Knowing inline ignores width and height
- Understanding vertical margin/padding limits on inline
- Recognizing inline-block as the hybrid that flows inline but sizes like block
- Examples of default block and inline elements
Common Mistakes
- Claiming inline elements respect width and height
- Forgetting that vertical margins do not push lines on inline elements
- Saying inline-block always starts a new line
- Confusing inline-block with flex or grid items
- Assuming block elements cannot have their width constrained
Best Answer (HR Friendly)
“block elements take up a full line and can be given a set size, inline elements sit within a line of text and size to their content, and inline-block is a mix that flows inline like text but can still be given a width and height. Choosing between them controls how elements line up and how much space they take.”
Code Example
.block {
display: block; /* new line, full width, width/height honored */
width: 200px;
height: 50px;
}
.inline {
display: inline; /* flows in text; width/height ignored */
width: 200px; /* has no effect */
padding: 10px; /* horizontal padding works; vertical overlaps */
}
.inline-block {
display: inline-block; /* flows inline but sizes like a block */
width: 200px; /* honored */
height: 50px; /* honored */
vertical-align: top;
}Follow-up Questions
- Why does setting width on an inline element have no effect?
- How does inline-block differ from a flexbox item?
- What happens to vertical margins on inline elements?
- How do you remove the whitespace gap between inline-block elements?
- When would you prefer inline-block over float for layout?
MCQ Practice
1. Which display value ignores width and height?
inline elements size to their content and ignore explicit width and height declarations.
2. Which value flows inline yet honors width and height?
inline-block keeps the element in the inline flow while accepting box-model dimensions like a block.
3. Which element is block-level by default?
div is a block-level element by default, whereas span, a, and strong are inline by default.
Flash Cards
block behavior? — Starts on a new line, takes full width, honors width/height and all margins.
inline behavior? — Flows within a line, sizes to content, ignores width/height and vertical margins.
inline-block behavior? — Flows inline like text but accepts width, height, and full box-model spacing.
A default inline element? — span (also a, strong, em) — they flow within the text line.
Continue Learning
Related Interview Questions
Block vs Inline Elements: What's the Difference?
easy
How does the CSS cascade and inheritance determine which styles apply?
medium
What is the CSS box model and how do content, padding, border, and margin interact?
easy
What is the difference between the CSS box-sizing values content-box and border-box?
medium