The display property controls how an element is rendered in the document flow. The key difference between display: block and display: inline lies in how they occupy space and interact with other elements.

Main Differences

1
display: block — The element starts on a new line and stretches to fill the full available width.
2
display: inline — The element stays within a line and only takes up as much width as its content.
3
Block elements can have width, height, margin, and padding applied in all directions.
4
Inline elements ignore top and bottom margin or padding (they only affect left and right).
5
Multiple inline elements can appear next to each other in the same line, but block elements stack vertically.

Example: Block vs Inline Elements

In this example, the block element appears on its own line and takes the full width, while the inline elements sit next to each other within the same line.

Key Points

1
block elements form the main structure of the page (e.g., <div>, <section>, <p>).
2
inline elements are best for text-level content (e.g., <span>, <a>, <strong>).
3
You can change an element’s display type using CSS to modify layout behavior.
4
Combining inline and block properly ensures clean, predictable page layouts.

Difficulty: 2/10

Topics: display property, layout behavior, CSS box model

Scenario Questions

0-2 years experience

1
If you have a <span> element and you set display: block, how does its rendering change compared to the default?
2
You need a navigation menu where each item should sit on its own line. Would you use display: block or display: inline on the <li> elements, and why?
3
What happens to the width and height of an element when you switch from display: inline to display: block?

2-5 years experience

1
We have a component that uses display: inline for icons inside a button, but the icons sometimes overflow the button height. How would you debug and decide whether to change the display value?
2
During a refactor, a developer changed a <div> from display: block to display: inline to reduce markup, and the layout broke. Explain what likely broke and how you'd fix it.
3
When building a responsive card grid, you consider using display: inline-block versus display: block with floats. Discuss the trade‑offs.

5-8 years experience

1
Our design system includes a utility class .inline that sets display: inline. A new feature requires these elements sometimes need width/height. How would you evolve the utility to support both use‑cases without breaking existing pages?
2
We have a large legacy codebase where many components rely on display: block for layout, but we want to migrate to a flexbox‑based system. What challenges do display differences introduce, and how would you plan the migration to avoid regressions?
3
Explain how display: block vs inline affects reflow and paint performance when rendering a page with thousands of items, and what you would consider when optimizing.

8+ years experience

1
Our company is consolidating multiple UI libraries into a single design system. Some libraries use display: inline for form controls, others use block. How would you create a cross‑team strategy to standardize display behavior while preserving backward compatibility?
2
When moving from a monolithic CSS architecture to a CSS‑in‑JS solution, you need to decide how to represent layout primitives like block vs inline. What architectural considerations would guide your decision, and how would you ensure consistent behavior across all products?
3
If you were tasked with auditing the global stylesheet for accessibility and performance, how would misuse of display: inline versus block impact screen readers and layout stability, and what remediation plan would you propose?

Follow-up Questions

❓What happens to margin collapsing when you switch between block and inline?
❓Can you combine `display: inline` with other layout properties like flex or grid?
❓How does `display: inline-block` fit between the two?