Block vs Inline Elements: What's the Difference?
Understand the difference between block and inline elements in HTML/CSS, how the display property controls it, and when to use inline-block instead.
Expected Interview Answer
Block elements always start on a new line and stretch to fill the available width, while inline elements flow inside the surrounding text and only take up as much width as their content needs.
Elements like <div>, <p>, <h1>-<h6>, and <ul> are block-level by default: each one breaks onto its own line and fully respects width, height, and top/bottom margin. Elements like <span>, <a>, <strong>, and <em> are inline by default: they sit inline with text, ignore explicit width/height, and their top/bottom margin has no effect on surrounding layout, though left/right margin and padding do apply. The display property can override any element's default (display: inline on a div, display: block on a span), so the block/inline distinction is really about computed display, not the tag name. inline-block is a common middle ground: it flows inline like text but honors width, height, and full margin like a block box.
- Predicts how elements stack or flow without opening devtools
- Explains why width/height are ignored on plain inline elements
- Clarifies why vertical margin sometimes 'does nothing'
- Sets up understanding of inline-block and modern display values
- Helps debug unexpected line breaks or content wrapping
AI Mentor Explanation
A block element is like a full innings break — play stops completely and everything after it starts fresh on a new over, taking up the whole ground. An inline element is like a quick single between deliveries — it happens right inside the current passage of play, taking only the room it needs before the next ball carries on in the same line.
Step-by-Step Explanation
Step 1
Know the default box type
Every HTML element has a default CSS display value: block for structural tags like div/p/h1, inline for text-level tags like span/a/strong.
Step 2
Block boxes break the line
A block box starts on a new line, stretches to fill its parent's width by default, and fully applies width, height, and all four margins.
Step 3
Inline boxes flow with text
An inline box sits within the current line, sizes to its content, and ignores width/height plus top/bottom margin, though horizontal spacing still applies.
Step 4
Override with display
The display property can change any element's box type at will, for example display: inline on a div or display: block on a span.
Step 5
Reach for inline-block when mixed behavior is needed
inline-block flows inline like text but respects width, height, and full margin/padding like a block box — useful for nav items and buttons.
What Interviewer Expects
- States that block elements start on a new line and inline elements don't
- Names concrete default examples (div/p vs span/a)
- Knows width/height and vertical margin are ignored on inline elements
- Understands display can override the default box type
- Can explain inline-block as a hybrid
Common Mistakes
- Saying the distinction is fixed to the tag rather than the computed display value
- Claiming inline elements accept width/height by default
- Forgetting horizontal margin/padding still applies to inline elements
- Confusing inline-block with inline or with block
- Not mentioning that display: flex/grid also create block-level formatting contexts
Best Answer (HR Friendly)
“Block elements act like paragraphs — each one starts on its own new line and takes up the full width available. Inline elements act more like individual words — they sit right in the middle of a sentence and only take up as much space as they need.”
Code Example
<p>This paragraph is a <strong>block</strong> element, but the
<span>span</span> and <a href="#">link</a> inside it are inline —
they flow with the text instead of breaking onto new lines.</p>
<div>I am a block box.</div>
<div>I start on a new line and stretch full width.</div>.nav-item {
display: inline-block; /* flows inline, but honors width/height */
width: 120px;
height: 40px;
margin: 0 8px; /* full margin applies, unlike plain inline */
}
span.badge {
display: block; /* forces the span onto its own line */
}Follow-up Questions
- What is inline-block and when would you use it over block or inline?
- Why does top/bottom margin have no visible effect on an inline element?
- How do display: flex and display: grid change an element's formatting context?
- What happens to an inline element's width and height if you set them explicitly?
- How does the box model (content, padding, border, margin) differ between block and inline boxes?
MCQ Practice
1. Which of these is true about a default inline element like <span>?
Inline elements size to their content and ignore explicit width/height by default; only block-level boxes respect those properties fully.
2. What CSS property changes an element's default box type from inline to block?
The display property controls whether an element generates a block, inline, inline-block, or other box, overriding the tag's default.
3. Which value makes an element flow inline with text while still respecting width and height?
inline-block combines inline flow with block-level sizing, honoring width, height, and full margin/padding.
Flash Cards
Does a block element start on a new line? — Yes — block elements always start on a new line and stretch to fill the available width by default.
Do inline elements respect width and height? — No — by default inline elements ignore explicit width/height and size to their content.
Give a default block-level tag and a default inline tag. — div, p, h1 are block-level; span, a, strong are inline by default.
What does inline-block do differently from inline? — It flows inline with surrounding text but still honors width, height, and full margin like a block box.