Examples and practical differences between Block and Inline elements?

0-2 years experience

1. 1You need to add a navigation menu where each link should appear on its own line. Would you use a block or inline element for the list items, and why?
2. 2If you place an <img> inside a <p> tag, what effect does its default display type have on the surrounding text?

2-5 years experience

1. 1Your team notices that a button styled with `display: inline` is breaking the layout when the text wraps. Walk me through how you would debug and decide whether to change it to a block or inline‑block element.
2. 2During a refactor, a developer changed a <div> to a <span> to reduce markup, but the page layout shifted. Explain what likely happened and how you'd fix it.

5-8 years experience

1. 1We're building a component library that must support both mobile and desktop. How would you decide when to expose a component as block‑level vs inline‑level, considering CSS‑in‑JS and theming constraints?
2. 2A large e‑commerce site experiences a flash of unstyled content because some components are rendered as inline elements but contain block children. How would you redesign the rendering pipeline to avoid this at scale?

8+ years experience

1. 1Our legacy monolith mixes tables, divs, and spans heavily. We're planning a migration to a design system that enforces semantic HTML and consistent display behavior. What architectural guidelines would you set for block vs inline usage, and how would you enforce them across multiple product teams?
2. 2When introducing a new CSS framework across the company, you notice that its reset changes the default display of many elements, causing layout regressions in critical pages. How would you structure the rollout and testing strategy to mitigate risk while preserving performance?