display: inline-block allows an element to flow inline with text and other inline elements, while still behaving like a block element in terms of width, height, margin, and padding.

Key Characteristics

1
The element does not start on a new line and can sit next to other inline elements.
2
Width and height can be applied and respected (unlike pure inline elements).
3
Top and bottom margins and padding are applied normally.
4
Useful for buttons, cards, or any elements that need inline flow but block-like styling.

Example: Inline-Block Usage

In this example, the two <span> elements sit next to each other like inline elements but have block-like width, height, and spacing.

Best Practices

1
Use inline-block when you need elements to align horizontally but still have controllable dimensions.
2
Be aware of whitespace between inline-block elements; it can be removed with HTML comments or CSS tricks.
3
For more complex alignment or responsive layouts, consider using Flexbox (display: flex) or Grid (display: grid) instead.

Difficulty: 6/10

Topics: display: inline-block, CSS box model, vertical alignment

Scenario Questions

0-2 years experience

1
You're trying to align three buttons side by side with equal spacing, but they're stacking vertically. How would you fix this using CSS?
2
I set width and height on a span element, but it's not taking up space. What CSS property would you change to make it respect those dimensions while staying inline?
3
When I put two inline-block divs next to each other, there's a weird gap between them. What's causing that and how do you remove it?

2-5 years experience

1
A designer says the navigation links are misaligned vertically compared to the logo. They're all inline-block, but adjusting line-height didn't help. What would you check and why?
2
We switched from floats to inline-block for a grid of product cards, but now the layout breaks on mobile. What edge cases might we be missing, and how would you debug this?
3
Our team used inline-block for a breadcrumb component, but after a recent CSS update, the items wrap unexpectedly on medium screens. What could have changed, and how would you fix it without switching to flexbox?

5-8 years experience

1
You're designing a reusable component library where cards need to behave like inline elements for layout flexibility but support padding, borders, and fixed widths like blocks. Why choose inline-block over flexbox or grid here, and what are the long-term maintenance tradeoffs?
2
A legacy component uses inline-block for a horizontal list of icons with tooltips. It breaks in RTL layouts and has inconsistent spacing across browsers. How would you refactor this for reliability and accessibility without breaking existing consumers?
3
We have a performance-critical page with 50+ inline-block elements in a header. Is this a concern? What alternatives would you consider, and how would you measure the real impact?

8+ years experience

1
Our design system has used inline-block for decades across 20+ products. We're now migrating to a CSS-in-JS architecture with dynamic theming. What architectural risks does this legacy pattern introduce, and how would you plan its deprecation across teams?
2
A cross-team component is used in both CMS pages and mobile apps — sometimes as a row, sometimes as a column. Inline-block was chosen for its 'middle ground' behavior, but now it's causing inconsistent rendering in shadow DOM environments. How do you evaluate whether to standardize on flexbox or build a polyfill layer?
3
You're leading a migration from a legacy layout system to modern CSS. Inline-block was the go-to for horizontal layouts before flexbox existed. How do you prioritize refactoring these components across a codebase with 10K+ CSS rules, and how do you convince stakeholders it's worth the technical debt?

Follow-up Questions

❓What happens if you set margin: auto on an inline-block element?
❓How would you debug unexpected gaps between inline-block elements?
❓Why might inline-block not work as expected in a flex container?