Replaced elements, such as <img>, <input>, <textarea>, <video>, and <iframe>, have intrinsic dimensions and content that are replaced by external sources or browser-defined rendering. Their behavior with display depends on the CSS property applied.

Key Points

1
By default, most replaced elements behave like inline-block, allowing width and height to be set while flowing inline with text.
2
display: block makes replaced elements start on a new line and take up the full width of their container (unless width is specified).
3
display: inline keeps replaced elements in the text flow, but height and width may be ignored depending on the element and browser.
4
display: inline-block allows replaced elements to remain inline while respecting width and height.
5
Replaced elements respect margin and padding differently depending on the display value and the browser’s layout rules.

Example: Replaced Elements with Different Display

In this example, the first image flows inline with text, the second image appears on its own line as a block, and the input remains inline but respects its specified width.

Best Practices

1
Use inline-block for replaced elements when you need them inline but still want control over width and height.
2
Use block when you want replaced elements to occupy their own line and control layout structure.
3
Test across browsers, as some replaced elements may render slightly differently depending on default styles.

Difficulty: 5/10

Topics: replaced elements, display property, layout behavior

Scenario Questions

0-2 years experience

1
You need to hide an <img> but keep the space it occupies for layout purposes. Which display value would you choose and why?
2
If you set display:block on an <input type='text'> inside a form, what visual changes do you expect compared to the default styling?

2-5 years experience

1
A recent CSS change set all form inputs to display:inline-block and now the fields are wrapping oddly on small screens. Explain why this might happen and how you'd fix it.
2
You added display:none to an <img> inside a flex container and the whole container collapsed. Why does that happen, and what alternative display setting could keep the layout while hiding the image?

5-8 years experience

1
Your design system uses custom button components built from <input type='button'>. Discuss the trade‑offs of using display:inline-block versus display:block for these components across responsive breakpoints.
2
In a navigation bar that uses flexbox, you need icons (<svg> or <img>) to align vertically with text. How does the display value of these replaced elements affect alignment, and what CSS techniques would you apply?
3
A data‑heavy table contains hundreds of <input> elements. Changing their display property impacts rendering performance. Explain how browsers handle replaced elements with different display values and any performance considerations.

8+ years experience

1
Your organization is migrating a legacy UI that relies on inline <img> elements inside tables to a modern component framework. How would you refactor the display handling of replaced elements to avoid layout regressions across many pages?
2
The design team wants all icons to be <img> with display:inline-block so they can use CSS sprites. Discuss the long‑term maintenance implications of this decision and alternative approaches (e.g., background‑image, <svg>, CSS mask) regarding accessibility and theming.
3
When building a design‑token system, you need to define default display values for replaced elements. How would you structure these tokens to cover edge cases like form controls in grid layouts, and what guidelines would you set for future developers?

Follow-up Questions

❓What edge cases would you watch for when changing the display of a replaced element?
❓How would you verify that your change didn't break existing layouts?
❓Can you describe how vertical‑align works differently for inline versus inline‑block replaced elements?